From 77d4f78cc2f6d667e413d4755f6cf5b565c22925 Mon Sep 17 00:00:00 2001 From: defaultkavy Date: Tue, 8 Oct 2024 00:24:41 +0800 Subject: [PATCH] v0.4.0 new: posts page header. enhance: hint will show up when no posts is loaded. fix: [css] login page `login-container` width abnormal on small width screen. change: set route path `/posts` render same as path `/` --- dist/assets/index-BW2KEYV0.css | 1 + dist/assets/index-BkbpsU_v.css | 1 - dist/assets/index-Djy_8N6Q.js | 1 + dist/assets/index-La3x4wRW.js | 1 - dist/index.html | 4 +- index.scss | 70 ++++++++++++++---------- package.json | 2 +- src/component/Drawer/_$Drawer.scss | 10 ++-- src/component/PostGrid/$PostGrid.ts | 24 ++++++-- src/component/PostTile/_$PostTile.scss | 36 +++++++----- src/component/Searchbar/_$Searchbar.scss | 26 ++++----- src/main.ts | 18 +++++- src/route/login/_$login_route.scss | 8 ++- src/route/post/_$post_route.scss | 21 +++---- 14 files changed, 136 insertions(+), 87 deletions(-) create mode 100644 dist/assets/index-BW2KEYV0.css delete mode 100644 dist/assets/index-BkbpsU_v.css create mode 100644 dist/assets/index-Djy_8N6Q.js delete mode 100644 dist/assets/index-La3x4wRW.js diff --git a/dist/assets/index-BW2KEYV0.css b/dist/assets/index-BW2KEYV0.css new file mode 100644 index 0000000..9e81160 --- /dev/null +++ b/dist/assets/index-BW2KEYV0.css @@ -0,0 +1 @@ +layout.post-grid{margin-top:.4rem}post-tile{display:block;transition:.3s all ease;position:relative;transition:all .3s ease;border-radius:var(--border-radius-medium);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}@media (hover: hover){post-tile:hover{transform:scale(1.02);z-index:1;box-shadow:0 0 10px color-mix(in srgb,var(--secondary-color-1) 50%,transparent)}}post-tile.loading{transition:none}post-tile:active{transform:scale(.95)}post-tile div.video-detail,post-tile div.gif-detail{position:absolute;background-color:var(--secondary-color-3);color:var(--primary-color);bottom:.3rem;right:.3rem;padding:.2em .4em;height:1rem;border-radius:var(--border-radius-small);font-size:12px;display:flex;align-items:center;gap:.2rem;z-index:2}post-tile div.video-detail ion-icon,post-tile div.gif-detail ion-icon{font-size:1.4rem}post-tile div.video-detail ion-icon[name=images-outline],post-tile div.gif-detail ion-icon[name=images-outline]{padding:.1rem;font-size:1rem}post-tile div.video-detail span.duration,post-tile div.gif-detail span.duration{text-transform:uppercase;z-index:2}post-tile a{background-color:transparent;padding:0;border-radius:0}post-tile a img{height:100%;width:100%;vertical-align:top;background-color:var(--secondary-color-1)}post-tile a video{height:100%;width:100%;object-fit:cover;position:absolute;z-index:1}searchbar{display:flex;align-items:center;flex-direction:column;width:100%;z-index:200;position:fixed;height:100%}searchbar div.input-container{margin-top:.4rem;background-color:color-mix(in srgb,var(--secondary-color-2) 100%,transparent);border-radius:var(--border-radius-small);font-size:1rem;width:500px;padding:.4rem;max-width:calc(100% - 2rem);box-sizing:border-box;z-index:201;display:flex;align-items:center;border:1px solid var(--secondary-color-4)}searchbar div.input-container:focus-within{outline:none}searchbar div.input-container tag-input{display:flex;gap:.4rem;width:100%;overflow:hidden;padding-inline:.4rem;box-sizing:border-box;cursor:text}searchbar div.input-container tag-input tag{display:inline-block;padding:.2rem .4rem;background-color:var(--secondary-color-4);color:var(--secondary-color-9);border-radius:var(--border-radius-small);cursor:pointer}searchbar div.input-container ion-icon{font-size:20px;color:var(--secondary-color-4);cursor:pointer}searchbar div.input-container ion-icon:hover{color:var(--secondary-color-9)}searchbar div.selection-list-container{overflow:hidden;border-radius:var(--border-radius-small);background-color:var(--secondary-color-1);z-index:201;max-width:calc(100% - 2rem);width:500px}searchbar div.selection-list-container selection-list{display:block;max-height:40vh;overflow-y:scroll;overflow-x:hidden;position:relative}searchbar div.selection-list-container selection-list::-webkit-scrollbar{width:4px}searchbar div.selection-list-container selection-list selection{display:flex;justify-content:space-between;align-items:center;padding:.4rem 1rem;cursor:pointer;gap:1rem}searchbar div.selection-list-container selection-list selection:hover{background-color:color-mix(in srgb,var(--secondary-color-3) 50%,transparent)}searchbar div.selection-list-container selection-list selection.active{background-color:var(--secondary-color-3)}searchbar div.selection-list-container selection-list selection div.selection-label{display:flex;flex-wrap:wrap;gap:.5rem}searchbar div.selection-list-container selection-list selection div.selection-label .label-container{display:flex;gap:.5rem;align-items:center}searchbar div.selection-list-container selection-list selection div.selection-label .label-container ion-icon{font-size:1rem}searchbar div.selection-list-container selection-list selection div.tag-detail{display:flex;align-items:center;gap:.5rem}searchbar div.selection-list-container selection-list selection div.tag-detail .tag-post-count{font-size:.8rem}searchbar div.selection-list-container selection-list selection .tag-category,searchbar div.selection-list-container selection-list selection .user-level{padding:.1rem .4rem;border-radius:var(--border-radius-small);font-size:.9rem;background-color:var(--secondary-color-4);color:var(--secondary-color-9)}searchbar div.filter{background-color:var(--secondary-color-1);opacity:.5;position:fixed;top:0;height:100%;width:100%;z-index:199}.input-wrapper{color:var(--primary-color);border:1px solid var(--secondary-color-9);border-radius:var(--border-radius-small);position:relative;box-sizing:border-box;line-height:1em;font-size:14px;padding:4px 8px;display:inline-block;max-width:100%;text-overflow:ellipsis}.input-wrapper span.sizer{font-family:inherit;white-space:pre;height:1em;display:inline-block;font-size:inherit;line-height:inherit;box-sizing:border-box;position:relative;opacity:0;min-width:2px;-webkit-user-select:none;user-select:none;vertical-align:top}.input-wrapper input{height:100%;text-overflow:ellipsis;font-family:inherit;background:none;color:inherit;top:0;left:0;font-size:inherit;line-height:inherit;padding:inherit;position:absolute;box-sizing:border-box;width:100%;border:none;outline:none}button.icon{display:flex;justify-content:center;align-items:center;gap:.4rem;padding:.8rem 1.2rem}button.icon ion-icon{font-size:1.4rem;color:inherit}button.icon.vertical{flex-direction:column}drawer{position:fixed;top:0;left:0;display:flex;z-index:300;height:100%;width:100%;box-sizing:border-box;justify-content:end;align-items:center;padding:1rem}drawer div.drawer-container{width:300px;max-width:70%;height:100%;background-color:var(--secondary-color-1);border-radius:var(--border-radius-large);z-index:1;overflow:hidden}drawer div.drawer-container div.user-info{background-color:var(--secondary-color-2);padding:2rem}drawer div.drawer-container div.user-info .username{margin:0;color:var(--secondary-color-9);cursor:pointer}drawer div.drawer-container div.user-info div.user-detail{display:flex;gap:.5rem;margin-top:.2rem}drawer div.drawer-container div.user-info div.user-detail span{font-size:.8rem;color:var(--primary-color-dark);display:block;cursor:pointer}drawer div.drawer-container div.user-info div.user-nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}drawer div.drawer-container div.nav{padding:2rem;display:flex;gap:1rem;flex-direction:column}drawer div.filter{position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--secondary-color-1) 50%,transparent),color-mix(in srgb,var(--secondary-color-0) 70%,transparent))}#post{padding:0;padding-top:var(--nav-height)}#post section{background-color:#2f2f45;border-radius:var(--border-radius-large);padding:20px}#post div.viewer{height:calc(100vh - 2rem - var(--nav-height));display:flex;justify-content:center;align-items:center;background-color:#000;border-radius:var(--border-radius-large);overflow:hidden;width:calc(100vw - 300px - 4rem);margin:1rem}@media (max-width: 800px){#post div.viewer{width:100%;height:calc(100vh - var(--nav-height));border-radius:0;margin:0}}#post div.viewer img{max-width:100%;max-height:100%}#post div.viewer video{max-width:100%;max-height:100%;-webkit-user-drag:none;transition:all .3s ease}#post div.content{width:calc(100vw - 300px - 2rem);display:flex;flex-direction:column;padding:1rem;box-sizing:border-box}@media (max-width: 800px){#post div.content{width:100%}}#post div.content::-webkit-scrollbar{background-color:#000;width:4px}#post div.content::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}#post div.content>h3{padding-left:1rem;margin-block:1rem}#post div.content section.commentary *{text-wrap:wrap;word-break:break-word}#post div.sidebar{--padding: 1rem;position:fixed;top:calc(var(--nav-height) + var(--padding));right:var(--padding);display:flex;flex-direction:column;gap:.4rem;width:300px;overflow:scroll;overflow-x:hidden;height:calc(100vh - 2rem - var(--nav-height));border-radius:var(--border-radius-large)}@media (max-width: 800px){#post div.sidebar{position:static;width:100%;overflow:visible;height:100%;padding:1rem;box-sizing:border-box}}#post div.sidebar::-webkit-scrollbar{background-color:#000;width:0px}#post div.sidebar::-webkit-scrollbar-thumb{background-color:#aeaeec}#post div.sidebar h3{padding-left:1rem;margin-block:.6rem}#post div.sidebar .post-info{background-color:#2f2f45;border-radius:var(--border-radius-large);padding:20px;display:flex;flex-direction:column;gap:.4rem}#post div.sidebar .post-info .buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}#post div.sidebar div.property{display:flex;gap:.6rem;align-items:center;width:100%}#post div.sidebar div.property span.property-name{flex-shrink:0}#post div.sidebar div.property div.property-values{display:flex;gap:.4rem;width:100%;overflow:hidden}#post div.sidebar div.property div.property-values span.property-value{padding:.2rem .4rem;background-color:var(--secondary-color-1);color:var(--primary-color-dark);border-radius:var(--border-radius-small);justify-content:space-between;flex-shrink:1;display:flex;align-items:center;overflow:hidden}#post div.sidebar div.property div.property-values span.property-value:has(ion-icon){flex-shrink:0}#post div.sidebar div.property div.property-values span.property-value *{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis;flex-shrink:1}#post div.sidebar div.property div.property-values span.property-value ion-icon{font-size:1rem;padding:4px;box-sizing:border-box}#post div.sidebar div.inline{display:flex;gap:1rem}#post div.sidebar div.post-tags{display:flex;flex-direction:column;gap:.2rem}#post div.sidebar div.post-tags div.tag{align-items:center}#post div.sidebar div.post-tags div.tag a.tag-name{word-break:break-word;text-decoration:none}#post div.sidebar div.post-tags div.tag span.tag-post-count{background-color:var(--secondary-color-3);color:var(--secondary-color-8);padding:0 4px;border-radius:var(--border-radius-small);font-size:12px;margin-left:.4rem}route#login{display:flex;justify-content:center;align-items:center;margin-top:5rem}route#login .login-container{padding:2rem;border:1px solid var(--secondary-color-9);border-radius:var(--border-radius-large);display:flex;flex-direction:column;justify-content:center;gap:1rem;max-width:400px;width:100%;box-sizing:border-box}route#login .login-container h1{margin:0}route#login .login-container .input-container{display:flex;flex-direction:column;gap:.5rem}route#login .login-container .input-container input{display:block}:root{--primary-color: #d1d1ee;--primary-color-dark: #9696b3;--primary-color-darker: #72728d;--secondary-color-9: #aeaeec;--secondary-color-8: #9a9ad6;--secondary-color-7: #7c7cb8;--secondary-color-6: #646497;--secondary-color-5: #545486;--secondary-color-4: #424268;--secondary-color-3: #3b3b66;--secondary-color-2: #24243b;--secondary-color-1: #1e1e2c;--secondary-color-0: #07070c;--shadow-color: #09090e50;--border-radius-small: .4rem;--border-radius-medium: .8rem;--border-radius-large: 1.2rem;--nav-height: 50px}html{overflow-x:hidden;font-size:14px}html ::-webkit-scrollbar{background-color:var(--secondary-color-1);width:8px}html ::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}body{overflow-x:hidden;background-color:var(--secondary-color-1);color:var(--primary-color);margin:0;font-family:Microsoft Yahei}nav{display:flex;width:100%;height:var(--nav-height);position:fixed;top:0;z-index:100;background-color:color-mix(in srgb,var(--secondary-color-1) 70%,transparent);justify-content:space-between;align-items:center;padding-inline:1rem;box-sizing:border-box;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}nav a.title{display:flex;align-items:center;gap:.4rem;text-decoration:none}nav a.title .booru-name{color:var(--secondary-color-9);margin:0}nav a.title .app{display:flex;align-items:center;border-radius:var(--border-radius-small);margin:0;gap:.4rem}nav a.title .app .version{color:var(--secondary-color-1);background-color:var(--secondary-color-9);padding:.2em .4em;border-radius:var(--border-radius-small);font-size:.8rem;font-weight:700}nav a.title .app .app-name{display:none;font-size:1rem;color:var(--secondary-color-9)}nav div.searchbar{padding:.4rem 10%;max-width:500px;background-color:color-mix(in srgb,var(--secondary-color-2) 30%,transparent);border:1px solid var(--primary-color-darker);border-radius:var(--border-radius-small);color:var(--primary-color-dark);transition:.3s all ease;cursor:pointer}nav div.searchbar:hover{color:var(--primary-color)}nav div.buttons{display:flex;align-items:center;gap:1rem}nav div.buttons ion-icon{transition:all .3s ease;border-radius:1rem;padding:.4rem}nav div.buttons ion-icon:hover{background-color:color-mix(in srgb,var(--secondary-color-3) 50%,transparent)}nav div.buttons ion-icon.search{display:none}nav div.buttons div.account{height:2rem;width:2rem;display:flex;justify-content:center;align-items:center;border-radius:2rem;font-weight:bolder;color:var(--secondary-color-9);background-color:var(--secondary-color-4);-webkit-user-select:none;user-select:none;cursor:pointer}@media (max-width: 800px){nav div.searchbar{display:none}nav div.buttons ion-icon.search{display:inline-block}}router{display:block;position:relative}router route{display:block;position:relative;padding-inline:1rem;padding-top:var(--nav-height)}route#posts header{margin-bottom:1rem}route#posts header h2{margin:0}button{background-color:var(--secondary-color-4);color:var(--secondary-color-9);padding:.8rem 1.2rem;border-radius:1rem;border:none;cursor:pointer}button:hover{background-color:var(--secondary-color-6);color:var(--primary-color)}ion-icon{font-size:24px;color:var(--primary-color);cursor:pointer}ion-icon:hover{color:var(--secondary-color-9)}a{text-decoration:none;color:var(--secondary-color-9)}input{background-color:var(--secondary-color-2);border-radius:var(--border-radius-small);border:1px solid var(--secondary-color-3);font-size:.9rem;padding:.8rem 1.2rem;color:var(--primary-color);outline:none}input:focus{border-color:var(--secondary-color-9)} diff --git a/dist/assets/index-BkbpsU_v.css b/dist/assets/index-BkbpsU_v.css deleted file mode 100644 index beb82f7..0000000 --- a/dist/assets/index-BkbpsU_v.css +++ /dev/null @@ -1 +0,0 @@ -layout.post-grid{margin-top:.4rem}post-tile{display:block;transition:.3s all ease;position:relative;transition:all .3s ease;border-radius:var(--border-radius-medium);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}@media (hover: hover){post-tile:hover{transform:scale(1.02);z-index:1;box-shadow:0 0 10px color-mix(in srgb,var(--background-color) 50%,transparent)}}post-tile.loading{transition:none}post-tile:active{transform:scale(.95)}post-tile div.video-detail,post-tile div.gif-detail{position:absolute;background-color:var(--background-color-lighter);color:var(--primary-color);bottom:.3rem;right:.3rem;padding:.2em .4em;height:1rem;border-radius:var(--border-radius-small);font-size:12px;display:flex;align-items:center;gap:.2rem;z-index:2}post-tile div.video-detail ion-icon,post-tile div.gif-detail ion-icon{font-size:1.4rem}post-tile div.video-detail ion-icon[name=images-outline],post-tile div.gif-detail ion-icon[name=images-outline]{padding:.1rem;font-size:1rem}post-tile div.video-detail span.duration,post-tile div.gif-detail span.duration{text-transform:uppercase;z-index:2}post-tile img{height:100%;width:100%;vertical-align:top;background-color:var(--background-color)}post-tile video{height:100%;width:100%;object-fit:cover;position:absolute;z-index:1}searchbar{display:flex;align-items:center;flex-direction:column;width:100%;z-index:200;position:fixed;height:100%}searchbar div.input-container{margin-top:.4rem;background-color:color-mix(in srgb,var(--background-color-light) 100%,transparent);border-radius:var(--border-radius-small);font-size:1rem;width:500px;padding:.4rem;max-width:calc(100% - 2rem);box-sizing:border-box;z-index:201;display:flex;align-items:center;border:1px solid var(--secondary-color-darker)}searchbar div.input-container:focus-within{outline:none}searchbar div.input-container tag-input{display:flex;gap:.4rem;width:100%;overflow:hidden;padding-inline:.4rem;box-sizing:border-box;cursor:text}searchbar div.input-container tag-input tag{display:inline-block;padding:.2rem .4rem;background-color:var(--secondary-color-darker);color:var(--secondary-color);border-radius:var(--border-radius-small);cursor:pointer}searchbar div.input-container ion-icon{font-size:20px;color:var(--secondary-color-darker);cursor:pointer}searchbar div.input-container ion-icon:hover{color:var(--secondary-color)}searchbar div.selection-list-container{overflow:hidden;border-radius:var(--border-radius-small);background-color:var(--background-color);z-index:201;max-width:calc(100% - 2rem);width:500px}searchbar div.selection-list-container selection-list{display:block;max-height:40vh;overflow-y:scroll;overflow-x:hidden;position:relative}searchbar div.selection-list-container selection-list::-webkit-scrollbar{width:4px}searchbar div.selection-list-container selection-list selection{display:flex;justify-content:space-between;align-items:center;padding:.4rem 1rem;cursor:pointer;gap:1rem}searchbar div.selection-list-container selection-list selection:hover{background-color:color-mix(in srgb,var(--background-color-lighter) 50%,transparent)}searchbar div.selection-list-container selection-list selection.active{background-color:var(--background-color-lighter)}searchbar div.selection-list-container selection-list selection div.selection-label{display:flex;flex-wrap:wrap;gap:.5rem}searchbar div.selection-list-container selection-list selection div.selection-label .label-container{display:flex;gap:.5rem;align-items:center}searchbar div.selection-list-container selection-list selection div.selection-label .label-container ion-icon{font-size:1rem}searchbar div.selection-list-container selection-list selection div.tag-detail{display:flex;align-items:center;gap:.5rem}searchbar div.selection-list-container selection-list selection div.tag-detail .tag-post-count{font-size:.8rem}searchbar div.selection-list-container selection-list selection .tag-category,searchbar div.selection-list-container selection-list selection .user-level{padding:.1rem .4rem;border-radius:var(--border-radius-small);font-size:.9rem;background-color:var(--secondary-color-darker);color:var(--secondary-color)}searchbar div.filter{background-color:var(--background-color);opacity:.5;position:fixed;top:0;height:100%;width:100%;z-index:199}.input-wrapper{color:var(--primary-color);border:1px solid var(--secondary-color);border-radius:var(--border-radius-small);position:relative;box-sizing:border-box;line-height:1em;font-size:14px;padding:4px 8px;display:inline-block;max-width:100%;text-overflow:ellipsis}.input-wrapper span.sizer{font-family:inherit;white-space:pre;height:1em;display:inline-block;font-size:inherit;line-height:inherit;box-sizing:border-box;position:relative;opacity:0;min-width:2px;-webkit-user-select:none;user-select:none;vertical-align:top}.input-wrapper input{height:100%;text-overflow:ellipsis;font-family:inherit;background:none;color:inherit;top:0;left:0;font-size:inherit;line-height:inherit;padding:inherit;position:absolute;box-sizing:border-box;width:100%;border:none;outline:none}button.icon{display:flex;justify-content:center;align-items:center;gap:.4rem;padding:.8rem 1.2rem}button.icon ion-icon{font-size:1.4rem;color:inherit}button.icon.vertical{flex-direction:column}drawer{position:fixed;top:0;left:0;display:flex;z-index:300;height:100%;width:100%;box-sizing:border-box;justify-content:end;align-items:center;padding:1rem}drawer div.drawer-container{width:300px;max-width:70%;height:100%;background-color:var(--background-color);border-radius:var(--border-radius-large);z-index:1;overflow:hidden}drawer div.drawer-container div.user-info{background-color:var(--background-color-light);padding:2rem}drawer div.drawer-container div.user-info .username{margin:0;color:var(--secondary-color);cursor:pointer}drawer div.drawer-container div.user-info div.user-detail{display:flex;gap:.5rem;margin-top:.2rem}drawer div.drawer-container div.user-info div.user-detail span{font-size:.8rem;color:var(--primary-color-dark);display:block;cursor:pointer}drawer div.drawer-container div.user-info div.user-nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}drawer div.drawer-container div.nav{padding:2rem;display:flex;gap:1rem;flex-direction:column}drawer div.filter{position:absolute;top:0;left:0;height:100%;width:100%;background:linear-gradient(90deg,color-mix(in srgb,var(--background-color-dark) 50%,transparent),color-mix(in srgb,var(--background-color-darker) 70%,transparent))}#post{padding:0;padding-top:var(--nav-height)}#post section{background-color:#2f2f45;border-radius:var(--border-radius-large);padding:20px}#post div.viewer{height:calc(100vh - 2rem - var(--nav-height));display:flex;justify-content:center;align-items:center;background-color:#000;border-radius:var(--border-radius-large);overflow:hidden;width:calc(100vw - 300px - 4rem);margin:1rem}@media (max-width: 800px){#post div.viewer{width:100%;height:calc(100vh - var(--nav-height));border-radius:0;margin:0}}#post div.viewer img{max-width:100%;max-height:100%}#post div.viewer video{max-width:100%;max-height:100%;-webkit-user-drag:none;transition:all .3s ease}#post div.content{width:calc(100vw - 300px - 2rem);display:flex;flex-direction:column;padding:1rem;box-sizing:border-box}@media (max-width: 800px){#post div.content{width:100%}}#post div.content::-webkit-scrollbar{background-color:#000;width:4px}#post div.content::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}#post div.content>h3{padding-left:1rem;margin-block:1rem}#post div.content section.commentary *{text-wrap:wrap;word-break:break-word}#post div.sidebar{--padding: 1rem;position:fixed;top:calc(var(--nav-height) + var(--padding));right:var(--padding);display:flex;flex-direction:column;gap:.4rem;width:300px;overflow:scroll;overflow-x:hidden;height:calc(100vh - 2rem - var(--nav-height));border-radius:var(--border-radius-large)}@media (max-width: 800px){#post div.sidebar{position:static;width:100%;overflow:visible;height:100%;padding:1rem;box-sizing:border-box}}#post div.sidebar::-webkit-scrollbar{background-color:#000;width:0px}#post div.sidebar::-webkit-scrollbar-thumb{background-color:#aeaeec}#post div.sidebar h3{padding-left:1rem;margin-block:.6rem}#post div.sidebar .post-info{background-color:#2f2f45;border-radius:var(--border-radius-large);padding:20px;display:flex;flex-direction:column;gap:.4rem}#post div.sidebar .post-info .buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}#post div.sidebar div.property{display:flex;gap:.6rem;align-items:center;width:100%}#post div.sidebar div.property span.property-name{flex-shrink:0}#post div.sidebar div.property div.property-values{display:flex;gap:.4rem;width:100%;overflow:hidden}#post div.sidebar div.property div.property-values span.property-value{padding:2px 4px;background-color:var(--secondary-color-darker);color:var(--secondary-color);border-radius:var(--border-radius-small);justify-content:space-between;flex-shrink:1}#post div.sidebar div.property div.property-values span.property-value:has(*){overflow:hidden;padding:0}#post div.sidebar div.property div.property-values span.property-value:has(ion-icon){flex-shrink:0}#post div.sidebar div.property div.property-values span.property-value *{display:block;padding:2px 4px;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis;flex-shrink:1}#post div.sidebar div.property div.property-values span.property-value ion-icon{font-size:1rem;padding:4px;box-sizing:border-box}#post div.sidebar div.inline{display:flex;gap:1rem}#post div.sidebar div.post-tags{display:flex;flex-direction:column;gap:.2rem}#post div.sidebar div.post-tags div.tag{align-items:center}#post div.sidebar div.post-tags div.tag a.tag-name{word-break:break-word;color:#d1d1ee;text-decoration:none}#post div.sidebar div.post-tags div.tag span.tag-post-count{background-color:var(--secondary-color-darker);color:var(--secondary-color);padding:0 4px;border-radius:var(--border-radius-small);font-size:12px;margin-left:.4rem}route#login{display:flex;justify-content:center;align-items:center;margin-top:5rem}route#login .login-container{padding:2rem;border:1px solid var(--secondary-color);border-radius:var(--border-radius-large);display:flex;flex-direction:column;justify-content:center;gap:1rem}route#login .login-container h1{margin:0}route#login .login-container .input-container{display:flex;flex-direction:column;gap:.5rem}route#login .login-container .input-container input{width:300px}:root{--background-color: #1e1e2c;--background-color-lighter: #3b3b66;--background-color-light: #24243b;--background-color-dark: #12121f;--background-color-darker: #07070c;--primary-color: #d1d1ee;--primary-color-dark: #9696b3;--primary-color-darker: #72728d;--secondary-color: #aeaeec;--secondary-color-dark: #6d6da1;--secondary-color-darker: #424268;--shadow-color: #09090e50;--border-radius-small: .4rem;--border-radius-medium: .8rem;--border-radius-large: 1.2rem;--nav-height: 50px}html{overflow-x:hidden;font-size:14px}html ::-webkit-scrollbar{background-color:var(--background-color);width:8px}html ::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}body{overflow-x:hidden;background-color:var(--background-color);color:var(--primary-color);margin:0;font-family:Microsoft Yahei}nav{display:flex;width:100%;height:var(--nav-height);position:fixed;top:0;z-index:100;background-color:color-mix(in srgb,var(--background-color) 70%,transparent);justify-content:space-between;align-items:center;padding-inline:1rem;box-sizing:border-box;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}nav a.title{display:flex;align-items:center;gap:.4rem;text-decoration:none}nav a.title .booru-name{color:var(--secondary-color);margin:0}nav a.title .app{display:flex;align-items:center;border-radius:var(--border-radius-small);margin:0;gap:.4rem}nav a.title .app .version{color:var(--background-color);background-color:var(--secondary-color);padding:.2em .4em;border-radius:var(--border-radius-small);font-size:.8rem;font-weight:700}nav a.title .app .app-name{display:none;font-size:1rem;color:var(--secondary-color)}nav div.searchbar{padding:.4rem 10%;max-width:500px;background-color:color-mix(in srgb,var(--background-color-light) 30%,transparent);border:1px solid var(--primary-color-darker);border-radius:var(--border-radius-small);color:var(--primary-color-dark);transition:.3s all ease;cursor:pointer}nav div.searchbar:hover{color:var(--primary-color)}nav div.buttons{display:flex;align-items:center;gap:1rem}nav div.buttons ion-icon{transition:all .3s ease;border-radius:1rem;padding:.4rem}nav div.buttons ion-icon:hover{background-color:color-mix(in srgb,var(--background-color-lighter) 50%,transparent)}nav div.buttons ion-icon.search{display:none}nav div.buttons div.account{height:2rem;width:2rem;display:flex;justify-content:center;align-items:center;border-radius:2rem;font-weight:bolder;color:var(--secondary-color);background-color:var(--secondary-color-darker);-webkit-user-select:none;user-select:none;cursor:pointer}@media (max-width: 800px){nav div.searchbar{display:none}nav div.buttons ion-icon.search{display:inline-block}}router{display:block;position:relative}router route{display:block;position:relative;padding-inline:1rem;padding-top:var(--nav-height)}button{background-color:var(--secondary-color-darker);color:var(--secondary-color);padding:.8rem 1.2rem;border-radius:1rem;border:none;cursor:pointer}button:hover{background-color:var(--secondary-color-dark);color:var(--primary-color)}ion-icon{font-size:24px;color:var(--primary-color);cursor:pointer}ion-icon:hover{color:var(--secondary-color)}a{color:var(--secondary-color);text-decoration:none}input{background-color:var(--background-color-light);border-radius:var(--border-radius-small);border:1px solid var(--background-color-lighter);font-size:.9rem;padding:.8rem 1.2rem;color:var(--primary-color);outline:none}input:focus{border-color:var(--secondary-color)} diff --git a/dist/assets/index-Djy_8N6Q.js b/dist/assets/index-Djy_8N6Q.js new file mode 100644 index 0000000..e9091c6 --- /dev/null +++ b/dist/assets/index-Djy_8N6Q.js @@ -0,0 +1 @@ +var Ct=Object.defineProperty;var $t=n=>{throw TypeError(n)};var Rt=(n,e,t)=>e in n?Ct(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var h=(n,e,t)=>Rt(n,typeof e!="symbol"?e+"":e,t),yt=(n,e,t)=>e.has(n)||$t("Cannot "+t);var x=(n,e,t)=>(yt(n,e,"read from private field"),t?t.call(n):e.get(n)),K=(n,e,t)=>e.has(n)?$t("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(n):e.set(n,t),J=(n,e,t,s)=>(yt(n,e,"write to private field"),s?s.call(n,t):e.set(n,t),t);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))s(i);new MutationObserver(i=>{for(const r of i)if(r.type==="childList")for(const a of r.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&s(a)}).observe(document,{childList:!0,subtree:!0});function t(i){const r={};return i.integrity&&(r.integrity=i.integrity),i.referrerPolicy&&(r.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?r.credentials="include":i.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function s(i){if(i.ep)return;i.ep=!0;const r=t(i);fetch(i.href,r)}})();class G{constructor(){h(this,"__hidden",!1);h(this,"domEvents",{});h(this,"parent");h(this,"events",new st)}on(e,t,s){e=w.orArrayResolve(e);for(const i of e){this.domEvents[i]||(this.domEvents[i]=new Map);const r=a=>{t(a,this)};this.domEvents[i].set(t,r),this.events.on(i,t),this.dom.addEventListener(i,r,s)}return this}off(e,t,s){var r;const i=(r=this.domEvents[e])==null?void 0:r.get(t);return i&&this.dom.removeEventListener(e,i,s),this.events.off(e,t),this}once(e,t,s){const i=r=>{this.dom.removeEventListener(e,i,s),t(r,this)};return this.dom.addEventListener(e,i,s),this.events.once(e,t),this}hide(e,t=!0){return w.fluent(this,arguments,()=>this.__hidden,()=>{var s;if(e!==void 0)return e instanceof S?(this.__hidden=e.value,e.use(this,"hide")):this.__hidden=e,t&&((s=this.parent)==null||s.children.render()),this})}remove(){var e;return(e=this.parent)==null||e.children.remove(this).render(),this}replace(e){var t;return(t=this.parent)==null||t.children.replace(this,e).render(),this}contains(e){return e?e instanceof G?this.dom.contains(e.dom):e instanceof EventTarget?this.dom.contains(w(e).dom):this.dom.contains(e):!1}self(e){return e(this),this}inDOM(){return document.contains(this.dom)}isElement(){return this instanceof R}get element(){return this instanceof R?this:null}}class R extends G{constructor(t,s){super();h(this,"dom");h(this,"static_classes",new Set);this.dom=this.createDom(t,s),this.dom.$=this,this.setOptions(s)}createDom(t,s){return s!=null&&s.dom?s.dom:t==="svg"?document.createElementNS("http://www.w3.org/2000/svg","svg"):document.createElement((s==null?void 0:s.tagname)??t)}setOptions(t){return this.id(t==null?void 0:t.id),t&&t.class&&this.class(...t.class),this}id(t){return $.fluent(this,arguments,()=>this.dom.id,()=>$.set(this.dom,"id",t))}class(...t){return $.fluent(this,arguments,()=>this.dom.classList,()=>{this.dom.classList.forEach(s=>this.static_classes.has(s)??this.dom.classList.remove(s)),this.dom.classList.add(...t.detype())})}addClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.add(...t.detype())})}removeClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.remove(...t.detype())})}staticClass(...t){return $.fluent(this,arguments,()=>this.static_classes,()=>{this.removeClass(...this.static_classes),this.static_classes.clear(),this.addStaticClass(...t)})}addStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(s=>this.static_classes.add(s)),this.addClass(...t)})}removeStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(s=>this.static_classes.delete(s)),this.removeClass(...t)})}css(t){return $.fluent(this,arguments,()=>this.dom.style,()=>{Object.assign(this.dom.style,t)})}attribute(t,s){return arguments.length?arguments.length===1?t===void 0?null:this.dom.getAttribute(t):arguments.length===2?t?(s===null?this.dom.removeAttribute(t):s!==void 0&&this.dom.setAttribute(t,`${s}`),this):this:this:null}tabIndex(t){return $.fluent(this,arguments,()=>this.dom.tabIndex,()=>$.set(this.dom,"tabIndex",t))}focus(){return this.dom.focus(),this}blur(){return this.dom.blur(),this}animate(t,s,i){const r=this.dom.animate(t,s);return i&&(r.onfinish=()=>i(r)),r}getAnimations(t){return this.dom.getAnimations(t)}get dataset(){return this.dom.dataset}domRect(t){const s=this.dom.getBoundingClientRect();if(!t)return s;const i=t instanceof R?t.dom.getBoundingClientRect():t;return{...s,top:s.top-i.top,left:s.left-i.left,right:s.right-i.left,bottom:s.bottom-i.top,x:s.x-i.x,y:s.y-i.y}}}class Q extends G{constructor(t){super();h(this,"dom");this.dom=t,this.dom.$=this}domRect(t){const s={bottom:innerHeight,height:innerHeight,left:0,right:innerWidth,top:0,width:innerWidth,x:0,y:0};if(!t)return s;const i=t instanceof R?t.dom.getBoundingClientRect():t;return{...s,top:s.top-i.top,left:s.left-i.left,right:s.right-i.left,bottom:s.bottom-i.top,x:s.x-i.x,y:s.y-i.y}}static from(t){return t.$ instanceof Q?t.$:new Q(t)}}const Dt="modulepreload",Nt=function(n){return"/"+n},vt={},Ht=function(e,t,s){let i=Promise.resolve();if(t&&t.length>0){document.getElementsByTagName("link");const a=document.querySelector("meta[property=csp-nonce]"),o=(a==null?void 0:a.nonce)||(a==null?void 0:a.getAttribute("nonce"));i=Promise.allSettled(t.map(u=>{if(u=Nt(u),u in vt)return;vt[u]=!0;const c=u.endsWith(".css"),d=c?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${u}"]${d}`))return;const m=document.createElement("link");if(m.rel=c?"stylesheet":Dt,c||(m.as="script"),m.crossOrigin="",m.href=u,o&&m.setAttribute("nonce",o),document.head.appendChild(m),c)return new Promise((_,l)=>{m.addEventListener("load",_),m.addEventListener("error",()=>l(new Error(`Unable to preload CSS for ${u}`)))})}))}function r(a){const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=a,window.dispatchEvent(o),!o.defaultPrevented)throw a}return i.then(a=>{for(const o of a||[])o.status==="rejected"&&r(o.reason);return e().catch(r)})};class Vt{constructor(e){h(this,"$container");h(this,"childList",new Set);this.$container=e}add(e,t=-1){if(t===-1||this.childList.size-1===t)this.childList.add(e);else{const s=[...this.childList];s.splice(t,0,e),this.childList.clear(),s.forEach(i=>this.childList.add(i))}e.parent=this.$container}remove(e){return this.childList.has(e)?(this.childList.delete(e),e.parent=void 0,this):this}removeAll(e=!0){this.childList.forEach(t=>this.remove(t)),e&&this.render()}replace(e,t){const s=this.array;return s.splice(s.indexOf(e),1,t),e.remove(),this.childList.clear(),s.forEach(i=>this.childList.add(i)),t.parent=this.$container,this}render(){const[e,t]=[this.array.map(i=>i.dom),Array.from(this.dom.childNodes)],s=[];for(;t.length||e.length;){const[i,r]=[t.at(0),e.at(0)];r?i?r!==i?(r.$.__hidden||(this.dom.insertBefore(r,i),s.push(r)),e.shift()):(r.$.__hidden&&this.dom.removeChild(r),e.shift(),t.shift()):(r.$.__hidden||this.dom.append(r),e.shift()):(i&&!s.includes(i)&&i.remove(),t.shift())}}indexOf(e){return this.array.indexOf(e)}get array(){return[...this.childList.values()]}get dom(){return this.$container.dom}}class S{constructor(e,t){h(this,"_value");h(this,"attributes",new Map);h(this,"linkStates",new Set);h(this,"options",{});this.set(e),t&&(this.options=t)}set(e){this._value=e,e instanceof S&&e.linkStates.add(this),this.update(),this.linkStates.forEach(t=>t.update())}static toJSON(e){const t={};for(let[s,i]of Object.entries(e))i instanceof S?i=i.toJSON():i instanceof Object&&S.toJSON(i),Object.assign(t,{[s]:i});return t}update(){for(const[e,t]of this.attributes.entries())for(const s of t)e[s]instanceof Function?this.options.format?e[s](this.options.format(this.value)):e[s](this.value):s in e&&(e[s]=this.value)}use(e,t){const s=this.attributes.get(e);s?s.add(t):this.attributes.set(e,new Set().add(t))}convert(e){return new S(this,{format:e})}get value(){return this._value instanceof S?this._value.value:this._value}toString(){return this.options.format?this.options.format(this.value):this.value instanceof Object?JSON.stringify(this.toJSON()):`${this.value}`}toJSON(){return this.value instanceof S?this.value.toJSON():this.value instanceof Object?S.toJSON(this.value):this.toString()}}class X extends G{constructor(t){super();h(this,"dom");this.dom=new Text(t),this.dom.$=this}content(t){return $.fluent(this,arguments,()=>this.dom.textContent,()=>$.set(this.dom,"textContent",t))}}class Z extends R{constructor(e,t){super(e,t)}autocapitalize(e){return $.fluent(this,arguments,()=>this.dom.autocapitalize,()=>$.set(this.dom,"autocapitalize",e))}innerText(e){return $.fluent(this,arguments,()=>this.dom.innerText,()=>$.set(this.dom,"innerText",e))}title(e){return $.fluent(this,arguments,()=>this.dom.title,()=>$.set(this.dom,"title",e))}dir(e){return $.fluent(this,arguments,()=>this.dom.dir,()=>$.set(this.dom,"dir",e))}translate(e){return $.fluent(this,arguments,()=>this.dom.translate,()=>$.set(this.dom,"translate",e))}popover(e){return $.fluent(this,arguments,()=>this.dom.popover,()=>$.set(this.dom,"popover",e))}spellcheck(e){return $.fluent(this,arguments,()=>this.dom.spellcheck,()=>$.set(this.dom,"spellcheck",e))}inert(e){return $.fluent(this,arguments,()=>this.dom.inert,()=>$.set(this.dom,"inert",e))}lang(e){return $.fluent(this,arguments,()=>this.dom.lang,()=>$.set(this.dom,"lang",e))}draggable(e){return $.fluent(this,arguments,()=>this.dom.draggable,()=>$.set(this.dom,"draggable",e))}hidden(e){return $.fluent(this,arguments,()=>this.dom.hidden,()=>$.set(this.dom,"hidden",e))}click(){return this.dom.click(),this}attachInternals(){return this.dom.attachInternals()}hidePopover(){return this.dom.hidePopover(),this}showPopover(){return this.dom.showPopover(),this}togglePopover(){return this.dom.togglePopover(),this}get accessKeyLabel(){return this.dom.accessKeyLabel}get offsetHeight(){return this.dom.offsetHeight}get offsetLeft(){return this.dom.offsetLeft}get offsetParent(){return $(this.dom.offsetParent)}get offsetTop(){return this.dom.offsetTop}get offsetWidth(){return this.dom.offsetWidth}}class f extends Z{constructor(t,s){super(t,s);h(this,"children",new Vt(this));h(this,"__position_cursor",0)}content(t){return $.fluent(this,arguments,()=>this,()=>{this.children.removeAll(!1),this.insert(t)})}insert(t,s=-1){return $.fluent(this,arguments,()=>this,async()=>{if(t instanceof Function){let i=t(this);i instanceof Promise?t=await i:t=i}else t instanceof Promise&&(t=await t);t=$.orArrayResolve(t),this.__position_cursor=s<0?this.children.array.length+s:s;for(const i of t)if(i!=null){if(i instanceof Array)this.insert(i,this.__position_cursor);else if(typeof i=="string")this.children.add(new X(i),s);else if(i instanceof S){const r=new X(i.toString());i.use(r,"content"),this.children.add(r,s)}else if(i instanceof Promise){const r=(await Ht(async()=>{const{$Async:o}=await Promise.resolve().then(()=>Bt);return{$Async:o}},void 0)).$Async,a=new r().await(i);this.children.add(a,s)}else this.children.add(i,s);this.__position_cursor+=1}this.children.render()})}clear(){return this.children.removeAll(),this}$(t){return $(this.dom.querySelector(t))}$all(t){return Array.from(this.dom.querySelectorAll(t)).map(s=>$(s))}get scrollHeight(){return this.dom.scrollHeight}get scrollWidth(){return this.dom.scrollWidth}scrollTop(t){return $.fluent(this,arguments,()=>this.dom.scrollTop,()=>$.set(this.dom,"scrollTop",t))}scrollLeft(t){return $.fluent(this,arguments,()=>this.dom.scrollLeft,()=>$.set(this.dom,"scrollLeft",t))}}class jt extends f{constructor(e){super("a",e),this.dom.addEventListener("click",t=>{$.anchorHandler&&this.href()&&(t.preventDefault(),$.anchorHandler(this,t))})}href(e){return $.fluent(this,arguments,()=>this.dom.href,()=>$.set(this.dom,"href",e))}target(e){return $.fluent(this,arguments,()=>this.dom.target??void 0,()=>{e&&(this.dom.target=e)})}}class Ut extends R{constructor(e,t){super(e,t)}}var I;(n=>{function e(o,u,c,d){return u.length?(d(),o):c()}n.fluent=e;function t(o){return o instanceof Array?o:[o]}n.orArrayResolve=t;function s(o,u){return t(u).forEach(c=>{Object.getOwnPropertyNames(c.prototype).forEach(d=>{d!=="constructor"&&Object.defineProperty(o.prototype,d,Object.getOwnPropertyDescriptor(c.prototype,d)||Object.create(null))})}),o}n.mixin=s;function i(o,u,c){c!==void 0&&(o[u]=c)}n.set=i;function r(o){return new S(o)}n.state=r;function a(o){if(o.$)return o.$;if(o.nodeName.toLowerCase()==="body")return new f("body",{dom:o});if(o.nodeName.toLowerCase()==="#document")return Q.from(o);if(o instanceof HTMLElement){const u=$.TagNameElementMap[o.tagName.toLowerCase()],c=u===f?new u(o.tagName,{dom:o}):new u({dom:o});if(c instanceof f)for(const d of Array.from(c.dom.childNodes))c.children.add($(d));return c}else if(o instanceof Text){const u=new X(o.textContent??"");return u.dom=o,u}else if(o instanceof SVGElement&&o.tagName.toLowerCase()==="svg")return new Ut("svg",{dom:o});throw`$NODE.FROM: NOT SUPPORT TARGET ELEMENT TYPE (${o.nodeName})`}n.from=a})(I||(I={}));class P{static create(...e){const t=class{};return Object.getOwnPropertyNames(P.prototype).forEach(s=>{s!=="constructor"&&e.includes(s)&&Object.defineProperty(t.prototype,s,Object.getOwnPropertyDescriptor(P.prototype,s)||Object.create(null))}),t}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}formAction(e){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",e))}formEnctype(e){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",e))}formMethod(e){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",e))}formNoValidate(e){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",e))}formTarget(e){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",e))}autocomplete(e){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",e))}name(e){return $.fluent(this,arguments,()=>this.dom.name,()=>$.set(this.dom,"name",e))}maxLength(e){return $.fluent(this,arguments,()=>this.dom.maxLength,()=>$.set(this.dom,"maxLength",e))}minLength(e){return $.fluent(this,arguments,()=>this.dom.minLength,()=>$.set(this.dom,"minLength",e))}required(e){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",e))}label(e){return $.fluent(this,arguments,()=>this.dom.label,()=>$.set(this.dom,"label",e))}get form(){return this.dom.form?$(this.dom.form):null}get validationMessage(){return this.dom.validationMessage}get validity(){return this.dom.validity}get willValidate(){return this.dom.willValidate}}class lt extends f{constructor(e){super("button",e)}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}}I.mixin(lt,P.create("disabled","checkValidity","formAction","formEnctype","formMethod","formNoValidate","formTarget","reportValidity"));class bt extends f{constructor(e){super("form",e)}action(e){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",e))}enctype(e){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",e))}method(e){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",e))}noValidate(e){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",e))}acceptCharset(e){return $.fluent(this,arguments,()=>this.dom.acceptCharset,()=>$.set(this.dom,"acceptCharset",e))}target(e){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",e))}requestSubmit(){return this.dom.requestSubmit(),this}reset(){return this.dom.reset(),this}submit(){return this.dom.submit(),this}get length(){return this.dom.length}get elements(){return Array.from(this.dom.elements).map(e=>$(e))}}I.mixin(bt,P.create("checkValidity","reportValidity","autocomplete"));class D extends Z{constructor(e){super("input",e)}value(e){return $.fluent(this,arguments,()=>this.type()==="number"?Number(this.dom.value):this.dom.value,()=>$.set(this.dom,"value",e,t=>{this.on("input",()=>{t.attributes.has(this.dom)!==!1&&(typeof t.value=="string"&&t.set(`${this.value()}`),typeof t.value=="number"&&t.set(Number(this.value())))})}))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}capture(e){return $.fluent(this,arguments,()=>this.dom.capture,()=>$.set(this.dom,"capture",e))}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}pattern(e){return $.fluent(this,arguments,()=>this.dom.pattern,()=>$.set(this.dom,"pattern",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}size(e){return $.fluent(this,arguments,()=>this.dom.size,()=>$.set(this.dom,"size",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}valueAsDate(e){return $.fluent(this,arguments,()=>this.dom.valueAsDate,()=>$.set(this.dom,"valueAsDate",e))}valueAsNumber(e){return $.fluent(this,arguments,()=>this.dom.valueAsNumber,()=>$.set(this.dom,"valueAsNumber",e))}webkitdirectory(e){return $.fluent(this,arguments,()=>this.dom.webkitdirectory,()=>$.set(this.dom,"webkitdirectory",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,s,i){return typeof t=="number"&&typeof s=="number"&&this.dom.setRangeText(e,t,s,i),this.dom.setRangeText(e),this}setSelectionRange(e,t,s){return this.dom.setSelectionRange(e,t,s),this}showPicker(){return this.dom.showPicker(),this}get files(){return this.dom.files}get webkitEntries(){return this.dom.webkitEntries}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}I.mixin(D,P.create("checkValidity","reportValidity","autocomplete","name","form","required","validationMessage","validity","willValidate","formAction","formEnctype","formMethod","formNoValidate","formTarget"));class Ft extends D{constructor(e){super(e),this.type("number")}static from(e){return $.mixin(D,this)}stepDown(){return this.dom.stepDown(),this}stepUp(){return this.dom.stepUp(),this}max(e){return $.fluent(this,arguments,()=>this.dom.max===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"max",e==null?void 0:e.toString()))}min(e){return $.fluent(this,arguments,()=>this.dom.min===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"min",e==null?void 0:e.toString()))}step(e){return $.fluent(this,arguments,()=>Number(this.dom.step),()=>$.set(this.dom,"step",e==null?void 0:e.toString()))}}class Wt extends D{constructor(e){super(e),this.type("radio")}static from(e){return $.mixin(D,this)}checked(e){return $.fluent(this,arguments,()=>this.dom.checked,()=>$.set(this.dom,"checked",e))}defaultChecked(e){return $.fluent(this,arguments,()=>this.dom.defaultChecked,()=>$.set(this.dom,"defaultChecked",e))}}class Gt extends D{constructor(e){super(e),this.type("file")}static from(e){return $.mixin(D,this)}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}accept(...e){return $.fluent(this,arguments,()=>this.dom.accept.split(","),()=>this.dom.accept=e.toString())}}I.mixin(D,[Ft,Wt,Gt]);class _t extends f{constructor(e){super("label",e)}for(e){return $.fluent(this,arguments,()=>this.dom.htmlFor,()=>{$.set(this.dom,"htmlFor",e)})}get control(){return this.dom.control}}I.mixin(_t,P.create("form"));class qt extends Z{constructor(e){super("img",e)}async load(e){return new Promise(t=>{const s=this.once("load",()=>{t(s)});typeof e=="string"?s.src(e):e.then(i=>s.src(i))})}static resize(e,t){return new Promise(s=>{const i=new Image;if(i.addEventListener("load",()=>{const r=document.createElement("canvas"),a=r.getContext("2d");if(!a)throw"$Image.resize: context undefined";const o=i.width/i.height,[u,c,d]=[o>1,o<1,o===1],m=t instanceof Array?t[0]:c?t:t*o,_=t instanceof Array?t[1]:u?t:t/o;r.height=_,r.width=m,a.drawImage(i,0,0,m,_),s(r.toDataURL())},{once:!0}),e instanceof File){const r=new FileReader;r.addEventListener("load",()=>i.src=r.result),r.readAsDataURL(e)}else i.src=e})}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}crossOrigin(e){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",e))}decoding(e){return $.fluent(this,arguments,()=>this.dom.decoding,()=>$.set(this.dom,"decoding",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}isMap(e){return $.fluent(this,arguments,()=>this.dom.isMap,()=>$.set(this.dom,"isMap",e))}loading(e){return $.fluent(this,arguments,()=>this.dom.loading,()=>$.set(this.dom,"loading",e))}referrerPolicy(e){return $.fluent(this,arguments,()=>this.dom.referrerPolicy,()=>$.set(this.dom,"referrerPolicy",e))}sizes(e){return $.fluent(this,arguments,()=>this.dom.sizes,()=>$.set(this.dom,"sizes",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}srcset(e){return $.fluent(this,arguments,()=>this.dom.srcset,()=>$.set(this.dom,"srcset",e))}useMap(e){return $.fluent(this,arguments,()=>this.dom.useMap,()=>$.set(this.dom,"useMap",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}decode(){return this.dom.decode()}get complete(){return this.dom.complete}get currentSrc(){return this.dom.currentSrc}get naturalHeight(){return this.dom.naturalHeight}get naturalWidth(){return this.dom.naturalWidth}get x(){return this.dom.x}get y(){return this.dom.y}}class zt extends f{constructor(e){super("canvas",e)}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>{$.set(this.dom,"height",e)})}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>{$.set(this.dom,"width",e)})}captureStream(e){return this.dom.captureStream(e)}getContext(e,t){return this.dom.getContext(e)}toBlob(e,t,s){return this.dom.toBlob(e,t,s),this}toDataURL(e,t){return this.dom.toDataURL(e,t)}transferControlToOffscreen(){return this.dom.transferControlToOffscreen()}}class Xt extends f{constructor(e){super("dialog",e)}open(e){return $.fluent(this,arguments,()=>this.dom.open,()=>$.set(this.dom,"open",e))}returnValue(e){return $.fluent(this,arguments,()=>this.dom.returnValue,()=>$.set(this.dom,"returnValue",e))}close(){return this.dom.close(),this}show(){return this.dom.show(),this}showModal(){return this.dom.showModal(),this}}class Tt extends f{constructor(e){super("select")}add(e){return this.insert(e),this}item(e){return $(this.dom.item(e))}namedItem(e){return $(this.dom.namedItem(e))}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}get length(){return this.dom.length}get size(){return this.dom.size}get options(){return Array.from(this.dom.options).map(e=>$(e))}get selectedIndex(){return this.dom.selectedIndex}get selectedOptions(){return Array.from(this.dom.selectedOptions).map(e=>$(e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e,t=>{this.on("input",()=>{t.attributes.has(this.dom)!==!1&&(typeof t.value=="string"&&t.set(`${this.value()}`),typeof t.value=="number"&&t.set(Number(this.value())))})}))}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}I.mixin(Tt,P.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","validationMessage","validity","willValidate"));class St extends f{constructor(e){super("option",e)}defaultSelected(e){return $.fluent(this,arguments,()=>this.dom.defaultSelected,()=>$.set(this.dom,"defaultSelected",e))}selected(e){return $.fluent(this,arguments,()=>this.dom.selected,()=>$.set(this.dom,"selected",e))}text(e){return $.fluent(this,arguments,()=>this.dom.text,()=>$.set(this.dom,"text",e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e))}get form(){return this.dom.form?$(this.dom.form):null}get index(){return this.dom.index}}I.mixin(St,P.create("form","disabled","label"));class It extends f{constructor(e){super("optgroup",e)}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}}I.mixin(It,P.create("disabled","label"));class Ot extends f{constructor(e){super("textarea",e)}cols(e){return $.fluent(this,arguments,()=>this.dom.cols,()=>$.set(this.dom,"cols",e))}wrap(e){return $.fluent(this,arguments,()=>this.dom.wrap,()=>$.set(this.dom,"wrap",e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,s,i){return typeof t=="number"&&typeof s=="number"&&this.dom.setRangeText(e,t,s,i),this.dom.setRangeText(e),this}setSelectionRange(e,t,s){return this.dom.setSelectionRange(e,t,s),this}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}I.mixin(Ot,P.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","minLength","maxLength","validationMessage","validity","willValidate"));var et;class xt extends f{constructor(t){super("async",t);K(this,et,!1)}await(t){return t instanceof Function?t(this).then(s=>this._loaded(s)):t.then(s=>this._loaded(s)),this}_loaded(t){if(J(this,et,!0),typeof t=="string")this.replace(new X(t));else if(t instanceof S){const s=new X(t.toString());t.use(s,"content"),this.replace(s)}else t==null?this.replace(new X(String(t))):this.replace(t);this.dom.dispatchEvent(new Event("load"))}get loaded(){return x(this,et)}}et=new WeakMap;const Bt=Object.freeze(Object.defineProperty({__proto__:null,$Async:xt},Symbol.toStringTag,{value:"Module"}));class Kt extends R{constructor(e,t){super(e,t)}autoplay(e){return $.fluent(this,arguments,()=>this.dom.autoplay,()=>$.set(this.dom,"autoplay",e))}get buffered(){return this.dom.buffered}controls(e){return $.fluent(this,arguments,()=>this.dom.controls,()=>$.set(this.dom,"controls",e))}crossOrigin(e){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",e))}get currentSrc(){return this.dom.currentSrc}currentTime(e){return $.fluent(this,arguments,()=>this.dom.currentTime,()=>$.set(this.dom,"currentTime",e))}defaultMuted(e){return $.fluent(this,arguments,()=>this.dom.defaultMuted,()=>$.set(this.dom,"defaultMuted",e))}defaultPlaybackRate(e){return $.fluent(this,arguments,()=>this.dom.defaultPlaybackRate,()=>$.set(this.dom,"defaultPlaybackRate",e))}disableRemotePlayback(e){return $.fluent(this,arguments,()=>this.dom.disableRemotePlayback,()=>$.set(this.dom,"disableRemotePlayback",e))}get duration(){return this.dom.duration}get ended(){return this.dom.ended}get error(){return this.dom.error}loop(e){return $.fluent(this,arguments,()=>this.dom.loop,()=>$.set(this.dom,"loop",e))}mediaKeys(e){return $.fluent(this,arguments,()=>this.dom.mediaKeys,()=>$.set(this.dom,"setMediaKeys",[e]))}muted(e){return $.fluent(this,arguments,()=>this.dom.muted,()=>$.set(this.dom,"muted",e))}get networkState(){return this.dom.networkState}get paused(){return this.dom.paused}playbackRate(e){return $.fluent(this,arguments,()=>this.dom.playbackRate,()=>$.set(this.dom,"playbackRate",e))}get played(){return this.dom.played}preload(e){return $.fluent(this,arguments,()=>this.dom.preload,()=>$.set(this.dom,"preload",e))}preservesPitch(e){return $.fluent(this,arguments,()=>this.dom.preservesPitch,()=>$.set(this.dom,"preservesPitch",e))}get readyState(){return this.dom.readyState}get remote(){return this.dom.remote}get seekable(){return this.dom.seekable}get seeking(){return this.dom.seeking}sinkId(e){return $.fluent(this,arguments,()=>this.dom.sinkId,()=>$.set(this.dom,"setSinkId",[e]))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}srcObject(e){return $.fluent(this,arguments,()=>this.dom.srcObject,()=>$.set(this.dom,"srcObject",e))}get textTracks(){return this.dom.textTracks}volume(e){return $.fluent(this,arguments,()=>this.dom.volume,()=>$.set(this.dom,"volume",e))}addTextTrack(e,t,s){return this.dom.addTextTrack(e,t,s)}canPlayType(e){return this.dom.canPlayType(e)}fastSeek(e){return this.dom.fastSeek(e),this}load(){return this.dom.load(),this}pause(){return this.dom.pause(),this}async play(){return await this.dom.play(),this}get isPlaying(){return this.currentTime()>0&&!this.paused&&!this.ended&&this.readyState>2}}class Jt extends Kt{constructor(e){super("video",e)}disablePictureInPicture(e){return $.fluent(this,arguments,()=>this.dom.disablePictureInPicture,()=>$.set(this.dom,"disablePictureInPicture",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}playsInline(e){return $.fluent(this,arguments,()=>this.dom.playsInline,()=>$.set(this.dom,"playsInline",e))}poster(e){return $.fluent(this,arguments,()=>this.dom.poster,()=>$.set(this.dom,"poster",e))}get videoHeight(){return this.dom.videoHeight}get videoWidth(){return this.dom.videoWidth}cancelVideoFrameCallback(e){return this.dom.cancelVideoFrameCallback(e),this}getVideoPlaybackQuality(){return this.dom.getVideoPlaybackQuality()}requestPictureInPicture(){return this.dom.requestPictureInPicture()}requestVideoFrameCallback(e){return this.dom.requestVideoFrameCallback(e)}}function w(n){if(typeof n>"u"||n===null||n instanceof G)return n;if(typeof n=="string"){if(n.startsWith("::"))return Array.from(document.querySelectorAll(n.replace(/^::/,""))).map(e=>w(e));if(n.startsWith(":"))return w(document.querySelector(n.replace(/^:/,"")));if(n in w.TagNameElementMap){const e=w.TagNameElementMap[n];return e===Z?new Z(n):e===f?new f(n):new e}else return new f(n)}if(n instanceof Node)return n.$?n.$:I.from(n);throw`$: NOT SUPPORT TARGET ELEMENT TYPE ('${n}')`}(n=>{n.anchorHandler=null,n.TagNameElementMap={html:f,head:f,document:Q,body:f,a:jt,p:f,pre:f,code:f,blockquote:f,strong:f,h1:f,h2:f,h3:f,h4:f,h5:f,h6:f,div:f,ol:f,ul:f,dl:f,li:f,input:D,label:_t,button:lt,form:bt,img:qt,dialog:Xt,canvas:zt,select:Tt,option:St,optgroup:It,textarea:Ot,video:Jt,async:xt};function e(l,p,v,T){return p.length?(T(),l):v()}n.fluent=e;function t(l){return l instanceof Array?l:[l]}n.orArrayResolve=t;function s(l,p){return I.mixin(l,p)}n.mixin=s;function i(l,p,v,T){if(v!==void 0){if(v instanceof S){v.use(l,p),l[p]instanceof Function?l[p](...v.value):l[p]=v.value,T&&T(v);return}l[p]instanceof Function?l[p](...v):l[p]=v}}n.set=i;function r(l,p){return new S(l,p)}n.state=r;async function a(l,p){return new Promise(v=>{const T=new FileReader;T.onload=O=>{const b=n("img");if(b.once("load",A=>{const j=n("canvas"),U=j.getContext("2d"),N=b.height()/b.width(),[M,q]=[N>1?p/N:p,N>1?p:p*N];j.height(q).width(M),U==null||U.drawImage(b.dom,0,0,M,q),v(j.toDataURL(l.type))}),!O.target)throw"$.resize(): e.target is null";b.src(O.target.result)},T.readAsDataURL(l)})}n.resize=a;function o(l=1){return parseInt(getComputedStyle(document.documentElement).fontSize)*l}n.rem=o;function u(l){const p=new DOMParser().parseFromString(l,"text/html").body;return Array.from(p.children).map(v=>n(v))}n.html=u;function c(l,p,v){if(typeof p=="number")return Array(p).fill("").map(O=>{const b=T(l)?l[0](...l.slice(1)):n(l);return v&&v(b),b});{const O=[];for(const b of p){const A=l instanceof Function?l(...b):T(l)?l[0](...l.slice(1)):n(l);b instanceof Function?b(A):(b instanceof G||typeof b=="string")&&A.content(b),O.push(A)}return O}function T(O){return O instanceof Array&&O[0]instanceof Function}}n.builder=c;function d(l,p){return Object.assign(n.TagNameElementMap,{[l]:p}),n.TagNameElementMap}n.registerTagName=d;function m(...l){return new st}n.events=m;function _(l){return l()}n.call=_})(w||(w={}));globalThis.$=w;class st{constructor(){h(this,"eventMap",new Map)}fire(e,...t){var s;return(s=this.eventMap.get(e))==null||s.forEach(i=>i(...t)),this}on(e,t){const s=this.eventMap.get(e)??this.eventMap.set(e,new Set).get(e);return s==null||s.add(t),this}off(e,t){var s;return(s=this.eventMap.get(e))==null||s.delete(t),this}once(e,t){const s=(...r)=>{var a;(a=this.eventMap.get(e))==null||a.delete(s),t(...r)},i=this.eventMap.get(e)??this.eventMap.set(e,new Set).get(e);return i==null||i.add(s),this}}Array.prototype.detype=function(...n){return this.filter(e=>{if(n.length)for(const t of n)return typeof e!=typeof t;else return e!==void 0})};Object.defineProperties(Set.prototype,{array:{get:function(){return Array.from(this)}}});Set.prototype.sort=function(n){return this.array.sort(n)};class Et extends f{constructor(t){super("layout",t);h(this,"_property",{ROW_MAX_HEIGHT:200,GAP:0,IS_RENDERING:!1,RENDER_REQUEST:!1,COLUNM:1,TYPE:"justified",ROOT:null,ITEM_PROPERTIES:new Map});this.css({display:"block",position:"relative"}),new ResizeObserver(s=>{this.inDOM()&&(this.render(),this.dom.dispatchEvent(new Event("resize")))}).observe(this.dom),document.addEventListener("scroll",s=>{s.target===this.root().dom&&this.scrollCompute()},{passive:!0}),new IntersectionObserver(s=>{this.inDOM()&&this.render()}).observe(this.dom)}type(t){return $.fluent(this,arguments,()=>this._property.TYPE,()=>$.set(this._property,"TYPE",t))}maxHeight(t){return $.fluent(this,arguments,()=>this._property.ROW_MAX_HEIGHT,()=>$.set(this._property,"ROW_MAX_HEIGHT",t))}column(t){return $.fluent(this,arguments,()=>this._property.COLUNM,()=>$.set(this._property,"COLUNM",t))}gap(t){return $.fluent(this,arguments,()=>this._property.GAP,()=>$.set(this._property,"GAP",t))}root(t){return $.fluent(this,arguments,()=>this._property.ROOT??$(document),()=>$.set(this._property,"ROOT",t))}get COL_WIDTH(){return(this.offsetWidth-this._property.GAP*(this._property.COLUNM-1))/this._property.COLUNM}justifiedCompute(){const t=[],s=this.offsetWidth;for(const i of this.children.array){const r=$(i);if(!(r instanceof R))continue;const a=r.attribute("layout-item-ratio"),o=a?parseFloat(a):r.dom.offsetWidth/r.dom.offsetHeight,u={$node:r,ratio:o};let c=t.at(-1);(!c||c.heightd+=l.ratio);const m=d+o,_=(s-this._property.GAP*c.items.length)/m;c.items.push(u),c.ratio=m,c.height=_}return t}waterfallCompute(){const t=[],s=this.COL_WIDTH,i=()=>{if(t.lengthr.height-a.height)[0]};for(const r of this.children.array){const a=$(r);if(!(a instanceof R))continue;const o=a.attribute("layout-item-ratio"),u=o?parseFloat(o):a.dom.offsetWidth/a.dom.offsetHeight,c={$node:a,ratio:u},d=i();let m=0;d.items.forEach(p=>m+=p.ratio);const _=s/(d.height+s/u),l=s/_;d.items.push(c),d.ratio=_,d.height=l}return t}render(){if(!this.inDOM())return this;if(this._property.ITEM_PROPERTIES.clear(),this._property.TYPE==="justified"){const t=this.justifiedCompute();let s=0;for(const i of t){let r=0;i.height>this._property.ROW_MAX_HEIGHT&&(i.height=this._property.ROW_MAX_HEIGHT);for(const a of i.items){const o=a.ratio*i.height;a.$node.css({position:"absolute",height:`${i.height}px`,width:`${o}px`,top:`${s}px`,left:`${r}px`}),a.$node.attribute("layout-item-ratio",a.ratio),this._property.ITEM_PROPERTIES.set(a.$node,{height:i.height,width:o,top:s,left:r,ratio:a.ratio,$node:a.$node}),r+=i.height*a.ratio+this._property.GAP}s+=i.height+this._property.GAP}this.css({height:`${s}px`})}else if(this._property.TYPE="waterfall"){const t=this.waterfallCompute(),s=this.COL_WIDTH;let i=0;for(const r of t){let a=0;for(const o of r.items){const u=s/o.ratio;o.$node.css({position:"absolute",height:`${u}px`,width:`${s}px`,top:`${a}px`,left:`${i}px`}),o.$node.attribute("layout-item-ratio",o.ratio),this._property.ITEM_PROPERTIES.set(o.$node,{height:u,width:s,top:a,left:i,ratio:o.ratio,$node:o.$node}),a+=u+this._property.GAP}i+=s+this._property.GAP}if(t.length){const r=t.sort((a,o)=>o.height-a.height)[0];this.css({height:`${r.height+r.items.length*this._property.GAP}px`})}else this.css({height:""})}return this.scrollCompute(),this}scrollCompute(){if(this.inDOM()===!1)return;const t=document.documentElement.scrollTop-this.dom.offsetTop;this._property.ITEM_PROPERTIES.forEach((s,i)=>{const r=s.top;s.top+s.height>t&&r{this.contentId=t,this.events.fire("rendered",{$view:this,previousContent:i,nextContent:s})},o=()=>{this.events.fire("afterSwitch",{$view:this,previousId:t})};return this.events.fire("beforeSwitch",{$view:this,preventDefault:()=>r=!0,targetId:t,previousContent:i,nextContent:s,switched:o,rendered:a}),r||(this.content(s),a(),o()),this}get currentContent(){if(this.contentId)return this.viewCache.get(this.contentId)}}$.registerTagName("view",Lt);var H;const g=class g extends Lt{constructor(t){super({tagname:"router",...t});K(this,H,"");h(this,"routes",new Map);g.routers.add(this)}base(t){return $.fluent(this,arguments,()=>x(this,H),()=>{J(this,H,t??x(this,H))})}map(t){t=$.orArrayResolve(t);for(const s of t)s instanceof Array?this.map(s):this.routes.set(s.path(),s);return this.resolve(),this}resolve(){return new Promise(t=>{if(!location.pathname.startsWith(x(this,H)))return t(2);const s=location.pathname.replace(x(this,H),"/").replace("//","/"),i=s.split("/").map(p=>`/${p}`),r=location.search,a=new Map(r.replace("?","").split("&").map(p=>p.split("="))),u=(()=>{const p=[];for(const[v,T]of this.routes){const O=$.orArrayResolve(v);for(const b of O){let A=0,j={},U={};const N=b.split("/").map(M=>`/${M}`);if(!(i.length{const gt=a.get(pt);gt!==void 0&&A++,Object.assign(U,{[pt]:gt})}),q.startsWith("/:")){A++,Object.assign(j,{[q.replace("/:","")]:i[M].replace("/","")});continue}else if(b.startsWith("#")&&b===location.hash){A++;continue}else if(q===i[M]){A++;continue}else break}p.push({deep:A,$route:T,params:j,query:U,routePath:b,pathId:Object.keys(U).length!==0?s+r:Object.keys(j).length!==0?s:O[0]})}}}return p.sort((v,T)=>T.deep-v.deep).at(0)})();if(!u)return t(1);const{$route:c,params:d,pathId:m,query:_}=u;if(m===this.contentId)return t(0);this.events.once("rendered",({nextContent:p,previousContent:v})=>{v==null||v.events.fire("afterShift",{$route:v}),p.events.fire("rendered",{$route:p}),t(0)});const l=this.viewCache.get(m)??c.build({params:d,query:_});this.viewCache.has(m)||this.setView(m,l),this.events.once("beforeSwitch",()=>{var p;l.events.fire("beforeShift",{$route:l}),(p=this.currentContent)==null||p.events.fire("beforeShift",{$route:this.currentContent})}),this.events.once("afterSwitch",()=>l.events.fire("afterShift",{$route:l})),this.switchView(m)})}static init(){if(!history.state||!("index"in history.state)){const t={index:g.historyIndex};history.replaceState(t,"")}else g.historyIndex=history.state.index;return g.navigationDirection=0,g.resolve(),window.addEventListener("popstate",()=>g.popstate()),window.addEventListener("scroll",()=>{this.setScrollHistory(this.historyIndex,location.href,document.documentElement.scrollTop)},{passive:!0}),history.scrollRestoration="manual",this}static open(t,s){return t===void 0?this:(t=this.urlResolver(t),t.href===this.url.href?this:t.origin!==this.url.origin?(window.open(t,s),this):(g.clearForwardScrollHistory(),g.historyIndex++,history.pushState(g.historyState,"",t),g.stateChange(0),g.resolve(),this))}static back(){return this.historyIndex--,history.back(),this}static replace(t){return t===void 0?this:(t=this.urlResolver(t),history.replaceState(g.historyState,"",t),this.stateChange(2),this.setScrollHistory(this.historyIndex,location.href,0),g.resolve(),this)}static urlResolver(t){return t instanceof URL?t:(t.startsWith("/")&&(t=`${location.origin}${t}`),t.startsWith("#")&&(t=`${location.origin}${location.pathname}${t}`),new URL(t))}static popstate(){const t=history.state.index>g.historyIndex?0:history.state.indext.resolve())),this.scrollRestoration(),this.setScrollHistory(this.historyIndex,location.href,document.documentElement.scrollTop)}static get historyState(){return{index:g.historyIndex}}static stateChange(t){const s=this.url,i=new URL(location.href);this.url=i,g.events.fire("stateChange",{beforeURL:s,afterURL:i,direction:t}),g.navigationDirection=t}static setScrollHistory(t,s,i){const r=this.getScrollHistory();if(!r)return sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify({[t]:{url:s,value:i}}));r[t]={url:s,value:i},sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify(r))}static getScrollHistory(){const t=sessionStorage.getItem(this.scrollHistoryKey);if(t)return JSON.parse(t)}static clearForwardScrollHistory(){const t=this.getScrollHistory();if(t)for(const s in t)Number(s)>this.historyIndex&&delete t[s],sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify(t))}static scrollRestoration(){const t=this.getScrollHistory();if(t&&t[this.historyIndex])document.documentElement.scrollTop=t[this.historyIndex].value??0;else if(location.hash.length){const s=$(document.body).$(location.hash);s&&(document.documentElement.scrollTop=s.dom.offsetTop)}else document.documentElement.scrollTop=0}};H=new WeakMap,h(g,"routers",new Set),h(g,"events",new st),h(g,"navigationDirection"),h(g,"historyIndex",0),h(g,"url",new URL(location.href)),h(g,"scrollHistoryKey","$ROUTER_SCROLL_HISTORY");let L=g;var F=(n=>(n[n.Forward=0]="Forward",n[n.Back=1]="Back",n[n.Replace=2]="Replace",n))(F||{});L.init();var B,V;const mt=class mt extends f{constructor(t){super("route",t);K(this,B,"");K(this,V);h(this,"rendered",!1)}path(t){return $.fluent(this,arguments,()=>x(this,B),()=>J(this,B,t??x(this,B)))}builder(t){return J(this,V,t),this}render(t){return x(this,V)&&this.content(x(this,V).call(this,{$route:this,params:t.params,query:t.query})),this.rendered=!0,this}build(t){return new mt({dom:this.dom.cloneNode()}).self(s=>{x(this,V)&&s.builder(x(this,V)).render({params:t.params,query:t.query})})}};B=new WeakMap,V=new WeakMap;let ct=mt;$.registerTagName("router",L);$.registerTagName("route",ct);Object.assign($,{open(n,e){return L.open(n,e)},replace(n){return L.replace(n)},back(){return L.back()}});class z{constructor(e,t,s=!0){h(this,"name$",$.state("..."));h(this,"post_upload_count$",$.state(0));h(this,"level$",$.state(10));h(this,"level_string$",$.state("..."));h(this,"booru");this.booru=e,Object.assign(this,t),s&&this.update$()}static async fetch(e,t){var r;const s=await fetch(`${e.origin}/users/${t}.json`).then(async a=>await a.json()),i=((r=this.manager.get(s.id))==null?void 0:r.update(s))??new this(e,s);return this.manager.set(i.id,i),i}static async fetchMultiple(e,t,s=200){let i="";if(t)for(const[u,c]of Object.entries(t))if(c instanceof Array)i+=`&search[${u}]=${c}`;else if(c instanceof Object)for(const[d,m]of Object.entries(c))i+=`&search[${u}${d}]=${m}`;else i+=`&search[${u}]=${c}`;return(await(await fetch(`${e.origin}/users.json?limit=${s}${i}`)).json()).map(u=>{const c=new this(e,u);return this.manager.set(c.id,c),c})}update(e){return Object.assign(this,e),this.update$(),this}update$(){this.name$.set(this.name),this.post_upload_count$.set(this.post_upload_count),this.level$.set(this.level),this.level_string$.set(this.level_string)}get booruURL(){return`${this.booru.origin}/users/${this.id}`}get url(){return`/users/${this.id}`}}h(z,"manager",new Map);class nt extends z{constructor(t,s,i){super(t,i,!1);h(this,"apiKey");h(this,"favorite_count$",$.state(0));h(this,"forum_post_count$",$.state(0));this.apiKey=s,this.update$()}update$(){var t,s;super.update$(),(t=this.forum_post_count$)==null||t.set(this.forum_post_count),(s=this.favorite_count$)==null||s.set(this.favorite_count)}static get storageUserData(){const t=localStorage.getItem("user_data");return t?JSON.parse(t):null}static set storageUserData(t){localStorage.setItem("user_data",JSON.stringify(t))}}const C=class C{constructor(e){h(this,"user");h(this,"posts",new Map);h(this,"tags",new Map);Object.assign(this,e),this.origin.endsWith("/")&&(this.origin=this.origin.slice(0,-1)),C.manager.set(this.name,this)}static set(e){this.used=e,this.name$.set(e.name),this.storageAPI=e.name;const t=nt.storageUserData;return t&&e.login(t.username,t.apiKey),this.events.fire("set"),this}static get storageAPI(){return localStorage.getItem("booru_api")}static set storageAPI(e){e?localStorage.setItem("booru_api",e):localStorage.removeItem("booru_api")}async fetch(e){const t=await fetch(`${this.origin}${e}`).then(s=>s.json());if(t.success===!1)throw t.message;return t}async login(e,t){const s=await this.fetch(`/profile.json?login=${e}&api_key=${t}`);return this.user=new nt(this,t,s),C.events.fire("login",this.user),this.user}logout(){return this.user=void 0,nt.storageUserData=null,C.events.fire("logout"),this}};h(C,"used"),h(C,"events",new st),h(C,"name$",$.state(C.name)),h(C,"manager",new Map);let y=C;class Yt{constructor(e,t){h(this,"post_count$",$.state(0));h(this,"name$",$.state(""));h(this,"booru");this.booru=e,Object.assign(this,t),this.$update()}static async fetch(e,t){var r;const s=await fetch(`${e.origin}/tags/${t}.json`).then(async a=>await a.json()),i=((r=e.tags.get(s.id))==null?void 0:r.update(s))??new this(e,s);return e.tags.set(i.id,i),i}static async fetchMultiple(e,t,s=1e3){let i="";if(t)for(const[u,c]of Object.entries(t))if(c instanceof Array)i+=`&search[${u}]=${c}`;else if(c instanceof Object)for(const[d,m]of Object.entries(c))i+=`&search[${u}${d}]=${m}`;else i+=`&search[${u}]=${c}`;return(await(await fetch(`${e.origin}/tags.json?limit=${s}${i}`)).json()).map(u=>{var d;const c=((d=e.tags.get(u.id))==null?void 0:d.update(u))??new this(e,u);return e.tags.set(c.id,c),c})}update(e){return Object.assign(this,e),this.$update(),this}$update(){this.post_count$.set(this.post_count),this.name$.set(this.name)}}var W=(n=>(n[n.General=0]="General",n[n.Artist=1]="Artist",n[n.Copyright=3]="Copyright",n[n.Character=4]="Character",n[n.Meta=5]="Meta",n))(W||{});const dt=1e3,rt=dt*60,ot=rt*60,at=ot*24,Qt=at*7,it=new Intl.RelativeTimeFormat("en",{style:"long"});function Zt(n){n=Math.floor(n);const e=n/dt,t=n/rt,s=n/ot,i=n/at,r=n%1e3,a=Math.floor(n%6e4/1e3),o=Math.floor(n%36e5/6e4),u=Math.floor(n%(36e5*24)/36e5),c=a.toString().padStart(2,"0"),d=o.toString().padStart(2,"0"),m=u.toString().padStart(2,"0");return{seconds:e,minutes:t,hours:s,days:i,mil:r,s:a,min:o,h:u,ss:c,mm:d,hh:m}}function te(n,e=Date.now()){const t=n-e,s=Math.abs(t);if(sawait s.json());return this.update(t),z.fetchMultiple(this.booru,{id:[this.uploader_id,this.approver_id].detype(null)}).then(()=>this.update$()),this}static async fetchMultiple(t,s,i=20){let r="";if(s){if(typeof s=="string")r=s;else for(const[d,m]of Object.entries(s))if(m!==void 0){if(d==="tags"){r+=`${m}`;continue}r.at(-1)!=="="&&(r+=" "),r+=`${d}:${m}`}}const o=await(await fetch(`${t.origin}/posts.json?limit=${i}&tags=${r}&_method=get`)).json();if(!(o instanceof Array))return[];const u=o.map(d=>{var _;const m=((_=t.posts.get(d.id))==null?void 0:_.update(d))??new this(t,d.id,d);return t.posts.set(m.id,m),m});if(!u.length)return u;const c=[...new Set(o.map(d=>[d.approver_id,d.uploader_id].detype(null)).flat())];return z.fetchMultiple(t,{id:c}).then(()=>u.forEach(d=>d.update$())),u}update$(){var t,s,i,r;this.uploader$.set(((t=this.uploader)==null?void 0:t.name$)??((s=this.uploader_id)==null?void 0:s.toString())),this.approver$.set(((i=this.approver)==null?void 0:i.name$)??((r=this.approver_id)==null?void 0:r.toString())??"None"),this.created_date$.set(te(+new Date(this.created_at))),this.favorites$.set(this.fav_count),this.score$.set(this.score),this.file_size$.set(ee(this.file_size)),this.file_ext$.set(this.file_ext),this.file_url$.set(this.file_url),this.source$.set(this.source),this.dimension$.set(`${this.image_width}x${this.image_height}`),this.url$.set(`${this.url}`),this.isUgoria&&this.webm_url$.set(this.large_file_url),this.createdDate=new Date(this.created_at),this.fire("update")}update(t){return Object.assign(this,t),this.update$(),this}async fetchTags(){return await this.ready,await Yt.fetchMultiple(this.booru,{name:{_space:this.tag_string}})}get pathname(){return`/posts/${this.id}`}get uploader(){return z.manager.get(this.uploader_id)}get approver(){return this.approver_id?z.manager.get(this.approver_id):null}get isVideo(){return this.file_ext==="mp4"||this.file_ext==="webm"||this.file_ext==="zip"}get isGif(){return this.file_ext==="gif"}get isUgoria(){return this.file_ext==="zip"}get hasSound(){return this.tag_string_meta.includes("sound")}get tags(){const t=this.tag_string.split(" ");return[...this.booru.tags.values()].filter(s=>t.includes(s.name))}get previewURL(){var t,s;return((s=(t=this.media_asset.variants)==null?void 0:t.find(i=>i.file_ext==="webp"))==null?void 0:s.url)??this.large_file_url}get url(){return`${this.booru.origin}/posts/${this.id}`}get isFileSource(){return this.source.startsWith("file://")}}class Pt{constructor(e){Object.assign(this,e)}static async fetch(e,t){const s=await fetch(`${e.origin}/artist_commentaries/${t}.json`);return new this(await s.json())}static async fetchMultiple(e,t,s=200){let i="";if(t)for(const[u,c]of Object.entries(t))if(c instanceof Array)i+=`&search[${u}]=${c}`;else if(c instanceof Object)for(const[d,m]of Object.entries(c))i+=`&search[${u}${d}]=${m}`;else i+=`&search[${u}]=${c}`;return(await(await fetch(`${e.origin}/artist_commentaries.json?limit=${s}${i}`)).json()).map(u=>{const c=new this(u);return this.manager.set(c.id,c),c})}}h(Pt,"manager",new Map);const se=new Intl.NumberFormat("en",{notation:"compact"});function Y(n){return se.format(n)}const ie=$("route").path("/posts/:id").id("post").builder(({$route:n,params:e})=>{if(!Number(e.id))return $("h1").content("404: POST NOT FOUND");const t=tt.get(y.used,+e.id);return[$("div").class("viewer").content(async()=>(await t.ready,t.isVideo?$("video").height(t.image_height).width(t.image_width).src(t.file_ext==="zip"?t.large_file_url:t.file_url).controls(!0).autoplay(!0).loop(!0).disablePictureInPicture(!0):$("img").src(t.large_file_url))),$("div").class("content").content([$("h3").content("Artist's Commentary"),$("section").class("commentary").content(async s=>{const i=(await Pt.fetchMultiple(y.used,{post:{_id:t.id}})).at(0);return[i?[i.original_title?$("h3").content(i.original_title):null,$("pre").content(i.original_description)]:"No commentary"]})]),$("div").class("sidebar").self(s=>{let i=0;addEventListener("scroll",()=>{s.inDOM()&&(i=document.documentElement.scrollTop)},{passive:!0}),n.on("beforeShift",()=>{innerWidth>800&&s.css({position:"absolute",top:`calc(${i}px + var(--nav-height) + var(--padding))`})}).on("afterShift",()=>s.css({position:"",top:""}))}).content([$("section").class("post-info").content([new E("id").name("Post").content(`#${e.id}`),new E("uploader").name("Uploader").content(t.uploader$),new E("approver").name("Approver").content(t.approver$),new E("date").name("Date").content(t.created_date$),new E("size").name("Size").content([t.file_size$,t.dimension$]),new E("file-type").name("File Type").content(t.file_ext$),$("div").class("inline").content([new E("favorites").name("Favorites").content(t.favorites$),new E("score").name("Score").content(t.score$)]),new E("file-url").name("File").content([$("a").href(t.file_url$).content(t.file_url$.convert(s=>s.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(s,i)=>ht(i,t.source))]),new E("source-url").name("Source").content([$("a").href(t.source$).content(t.source$.convert(s=>s.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(s,i)=>ht(i,t.source))]),new E("booru-url").name(y.name$).content([$("a").href(t.url$).content(t.url$.convert(s=>s.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(s,i)=>ht(i,t.source))]),new E("booru-url").name("Webm").hide(!0).self(async s=>{await t.ready,t.isUgoria&&s.content($("a").href(t.webm_url$).content(t.webm_url$.convert(i=>i.replace("https://",""))).target("_blank")).hide(!1)})]),$("div").class("post-tags").content(async s=>{const i=await t.fetchTags(),[r,a,o,u,c]=[i.filter(m=>m.category===W.Artist),i.filter(m=>m.category===W.Character),i.filter(m=>m.category===W.General),i.filter(m=>m.category===W.Meta),i.filter(m=>m.category===W.Copyright)];return[d("Artist",r),d("Character",a),d("Copyright",c),d("Meta",u),d("General",o)];function d(m,_){return _.length?[$("h3").content(m),$("section").content([_.map(l=>$("div").class("tag").content([$("a").class("tag-name").content(l.name).href(`/posts?tags=${l.name}`),$("span").class("tag-post-count").content(l.post_count$.convert(Y))]))])]:null}})])]});function ht(n,e){n.name("checkmark"),navigator.clipboard.writeText(e),setTimeout(()=>n.name("clipboard"),3e3)}class E extends f{constructor(t){super("div");h(this,"$name",$("span").class("property-name"));h(this,"$values",$("div").class("property-values"));this.staticClass("property").attribute("property-id",t),super.content([this.$name,this.$values.hide(!0)])}name(t){return this.$name.content(t),this}content(t){this.$values.hide(!1);const s=$.orArrayResolve(t);return this.$values.content(s.map(i=>$("span").staticClass("property-value").content(i))),this}}class ne extends f{constructor(t){super("post-tile");h(this,"post");h(this,"$video");h(this,"duration$",$.state(""));this.post=t,this.$video=this.post.isVideo?$("video").width(this.post.image_width).height(this.post.image_height).disablePictureInPicture(!0).loop(!0).muted(!0).hide(!0).on("mousedown",s=>s.preventDefault()):null,this.attribute("filetype",this.post.file_ext),this.durationUpdate(),this.build()}build(){var s,i;let t;(s=this.$video)==null||s.on("playing",(r,a)=>{t=setInterval(()=>{this.durationUpdate()},500)}),(i=this.$video)==null||i.on("pause",()=>{clearInterval(t),this.durationUpdate()}),this.class("loading").content([this.post.isVideo?$("div").class("video-detail").content([this.post.hasSound?$("ion-icon").name("volume-medium-outline"):null,this.post.isUgoria?$("ion-icon").name("images-outline"):null,$("span").class("duration").content(this.duration$)]):null,this.post.isGif?$("div").class("gif-detail").content([$("span").content("GIF")]):null,$("a").href(this.post.pathname).content(()=>[this.$video,$("img").draggable(!1).css({opacity:"0"}).width(this.post.image_width).height(this.post.image_height).src(this.post.previewURL).loading("lazy").on("mousedown",r=>r.preventDefault()).once("load",(r,a)=>{a.src(this.post.previewURL).on(["mouseenter","touchstart"],()=>{this.post.isGif&&a.src(this.post.large_file_url)},{passive:!0}).on(["mouseleave","touchend","touchcancel"],()=>{this.post.isGif&&a.src(this.post.previewURL)},{passive:!0}).animate({opacity:[0,1]},{duration:300,fill:"both"}),this.removeClass("loading")})]).on(["mouseenter","touchstart"],()=>{var r,a;(r=this.$video)!=null&&r.isPlaying||(a=this.$video)==null||a.src(this.post.large_file_url).hide(!1).play().catch(o=>{})},{passive:!0}).on(["mouseleave","touchend","touchcancel"],()=>{var r;(r=this.$video)==null||r.pause().currentTime(0).hide(!0)},{passive:!0})])}durationUpdate(){if(!this.$video)return;const t=Zt(this.post.media_asset.duration*1e3-this.$video.currentTime()*1e3);this.duration$.set(Number(t.hh)>0?`${t.hh}:${t.mm}:${t.ss}`:`${t.mm}:${t.ss}`)}}class wt extends Et{constructor(t){super();h(this,"posts",new Set);h(this,"$posts",new Set);h(this,"tags");h(this,"finished",!1);this.tags=t==null?void 0:t.tags,this.addStaticClass("post-grid"),this.type("waterfall").gap(10),this.init()}async init(){setInterval(()=>{this.inDOM()&&document.documentElement.scrollTop===0&&this.updateNewest()},1e4),y.events.on("set",()=>{this.removeAll(),this.finished&&(this.finished=!1,this.events.fire("startLoad"),this.loader())}),this.on("resize",()=>this.resize()),this.events.fire("startLoad"),this.loader()}async loader(){if(!this.inDOM())return setTimeout(()=>this.loader(),100);for(;this.inDOM()&&document.documentElement.scrollHeight<=innerHeight*2;)if(!(await this.getPosts()).length){this.finished=!0,this.posts.size||this.events.fire("noPost");return}if(document.documentElement.scrollTop+innerHeight>document.documentElement.scrollHeight-innerHeight*2&&!(await this.getPosts()).length){this.finished=!0,this.events.fire("endPost");return}setTimeout(()=>this.loader(),100)}resize(){const t=Math.round(this.dom.clientWidth/300);this.column(t>=2?t:2)}addPost(t){t=$.orArrayResolve(t);for(const i of t){if(!i.file_url||this.posts.has(i))continue;const r=new ne(i);this.$posts.add(r),this.posts.add(i)}const s=[...this.$posts.values()].sort((i,r)=>+r.post.createdDate-+i.post.createdDate);return this.content(s).render(),this}removeAll(){return this.posts.clear(),this.$posts.clear(),this.animate({opacity:[1,0]},{duration:300,easing:"ease"},()=>this.clear().render()),this}async updateNewest(){const t=this.sortedPosts.at(0),s=await tt.fetchMultiple(y.used,{tags:this.tags,id:t?`>${t.id}`:void 0},100);return this.addPost(s),s}async getPosts(){const t=this.sortedPosts.at(-1),s=await tt.fetchMultiple(y.used,{tags:this.tags,id:t?`<${t.id}`:void 0},100);return this.addPost(s),s}get sortedPosts(){return this.posts.array.sort((t,s)=>+s.createdDate-+t.createdDate)}}class re{static async fetch(e,t,s=20){return(await fetch(`${e.origin}/autocomplete.json?search[query]=${t}&search[type]=tag_query&version=1&limit=${s}`).then(r=>r.json())).map(r=>new oe(r))}}class oe{constructor(e){Object.assign(this,e)}isTag(){return this.type==="tag"||this.type==="tag-autocorrect"||this.type==="tag-alias"||this.type==="tag-word"}isTagAutocorrect(){return this.type==="tag-autocorrect"}isTagAntecedent(){return!!this.antecedent}isTagWord(){return this.type==="tag-word"}isUser(){return this.type==="user"}}class ae extends f{constructor(){super("searchbar");h(this,"$tagInput",new ue(this));h(this,"$selectionList",new he);h(this,"typingTimer",null);h(this,"$filter",$("div").class("filter"));this.build(),window.addEventListener("keyup",t=>{!this.inDOM()&&t.key==="/"&&this.activate(),this.inDOM()&&t.key==="Escape"&&this.inactivate()})}build(){this.content([$("div").class("input-container").content([this.$tagInput.on("input",()=>this.inputHandler()).on("keydown",t=>this.keyHandler(t)),$("ion-icon").name("close-circle-outline").title("Clear Input").on("click",()=>this.$tagInput.clearAll())]).on("click",t=>{t.target===this.$tagInput.dom&&this.$tagInput.addTag().input()}),$("div").class("selection-list-container").content([this.$selectionList]),this.$filter.on("click",()=>{location.hash==="#search"&&$.back()})])}activate(){return this.hide(!1),this.$filter.animate({opacity:[0,.5]},{duration:300,easing:"ease"}),this.$tagInput.input(),this}inactivate(){return this.animate({opacity:[.5,0]},{duration:300,easing:"ease"},()=>this.hide(!0)),this}keyHandler(t){var r,a;const s=()=>{t.preventDefault(),this.$tagInput.addTag().input()},i=o=>{const u=this.$tagInput.children.indexOf(this.$tagInput.$inputor),c=this.$tagInput.children.array.at(u+1);this.$tagInput.addTag(o.value()),c?this.$tagInput.editTag(c):this.$tagInput.input()};switch(t.key){case"ArrowUp":{t.preventDefault(),this.$selectionList.focusPrevSelection(),this.$tagInput.value((r=this.$selectionList.focused)==null?void 0:r.value());break}case"ArrowDown":{t.preventDefault(),this.$selectionList.focusNextSelection(),this.$tagInput.value((a=this.$selectionList.focused)==null?void 0:a.value());break}case" ":s();break;case"Enter":{t.preventDefault(),this.$selectionList.focused?i(this.$selectionList.focused):(this.$tagInput.addTag(),this.search());break}case"Tab":{t.preventDefault();const o=this.$tagInput.children.indexOf(this.$tagInput.$inputor);if(t.shiftKey){this.$tagInput.editTag(this.$tagInput.children.array.at(o-1));break}if(this.$selectionList.focused)i(this.$selectionList.focused);else{const u=this.$tagInput.children.array.at(o+1);u?this.$tagInput.editTag(u):this.$tagInput.addTag().input()}break}case"Backspace":{const o=this.$tagInput.children.indexOf(this.$tagInput.$inputor);o!==0&&!this.$tagInput.$input.value().length&&(t.preventDefault(),this.$tagInput.editTag(this.$tagInput.children.array.at(o-1)));break}}}inputHandler(){this.typingTimer&&(clearTimeout(this.typingTimer),this.typingTimer=null),this.typingTimer=setTimeout(async()=>{this.typingTimer=null,this.getSearchSuggestions()},200)}async getSearchSuggestions(){const t=this.$tagInput.$input.value();if(!t.length)return this.$selectionList.clearSelections();const s=await re.fetch(y.used,t,20);this.$selectionList.clearSelections().addSelections(s.map(i=>new ce().value(i.value).content([$("div").class("selection-label").content([i.isTagAntecedent()?$("span").class("tag-antecedent").self(r=>r.dom.innerHTML=i.antecedent.replaceAll(t,`${t}`)):null,$("div").class("label-container").content([i.isTagAntecedent()?$("ion-icon").name("arrow-forward-outline"):null,$("span").class("label").self(r=>r.dom.innerHTML=i.label.replaceAll(t,`${t}`))])]),i.isTag()?$("div").class("tag-detail").content([$("span").class("tag-post-count").content(Y(i.post_count)),$("span").class("tag-category").content(W[i.category])]):null,i.isUser()?$("span").class("user-level").content(i.level):null]).on("click",()=>{this.$tagInput.addTag(i.label).input()}))),this.$tagInput.$input.value().length||this.$selectionList.clearSelections()}search(){return $.replace(`/posts?tags=${this.$tagInput.query.replace(":","%3A")}`),this.$tagInput.clearAll(),this.inactivate(),this}checkURL(t,s){(t==null?void 0:t.hash)==="#search"&&this.inactivate(),s.hash==="#search"&&this.activate()}}class he extends f{constructor(){super("selection-list");h(this,"focused",null);h(this,"selections",new Set)}addSelections(t){t=$.orArrayResolve(t);for(const s of t)this.selections.add(s);return this.insert(t),this}clearSelections(){return this.focused=null,this.selections.clear(),this.clear(),this}focusSelection(t){return this.blurSelection(),this.focused=t,t.focus(),t.offsetTopthis.scrollTop()+this.offsetHeight&&this.scrollTop(t.offsetTop+t.offsetHeight-this.offsetHeight),this}blurSelection(){var t;return(t=this.focused)==null||t.blur(),this.focused=null,this}focusNextSelection(){const t=this.selections.array,s=t.at(0);if(this.focused){const i=t.at(t.indexOf(this.focused)+1);i?this.focusSelection(i):s&&this.focusSelection(s)}else s&&this.focusSelection(s)}focusPrevSelection(){const t=this.selections.array;if(this.focused){const s=t.at(t.indexOf(this.focused)-1);s&&this.focusSelection(s)}else{const s=t.at(0);s&&this.focusSelection(s)}}}class ce extends f{constructor(){super("selection");h(this,"property",{value:""})}value(t){return $.fluent(this,arguments,()=>this.property.value,()=>$.set(this.property,"value",t))}focus(){return this.addClass("active"),this}blur(){return this.removeClass("active"),this}}class ue extends f{constructor(t){super("tag-input");h(this,"$input",$("input").type("text"));h(this,"$sizer",$("span").class("sizer"));h(this,"$inputor",$("div").class("input-wrapper").content([this.$sizer,this.$input.on("input",()=>{this.$sizer.content(this.$input.value())})]));h(this,"tags",new Set);h(this,"$seachbar");this.$seachbar=t}input(){return this.insert(this.$inputor),this.$input.focus(),this.$input.value()?this.$seachbar.getSearchSuggestions():this.$seachbar.$selectionList.clearSelections(),this}addTag(t){if(t=t??this.$input.value(),!t.length)return this;const s=new le(t);return s.on("click",()=>this.editTag(s)),this.tags.add(s),this.value(""),this.$inputor.replace(s),this}editTag(t){return this.addTag(),this.tags.delete(t),t.replace(this.$inputor),this.value(t.name),this.$input.focus(),this.$seachbar.getSearchSuggestions(),this}clearAll(){return this.value(""),this.tags.clear(),this.clear(),this}value(t){return t===void 0?this:(this.$input.value(t),this.$sizer.content(t),this)}get query(){return this.tags.array.map(t=>t.name).toString().replace(",","+")}}class le extends f{constructor(t){super("tag");h(this,"name");this.name=t,this.build()}build(){this.content(this.name)}}class de extends f{constructor(){super("ion-icon")}name(e){return this.attribute("name",e),this}size(e){return this.attribute("size",e),this}}class me extends lt{constructor(){super();h(this,"$icon",$("ion-icon"));h(this,"$label",$("span"));this.addStaticClass("icon"),this.build()}build(){super.content([this.$icon.hide(!0),this.$label])}content(t){return this.$label.content(t),this}icon(t){return this.$icon.name(t).hide(!1),this}link(t,s=!1){return this.on("click",()=>s?$.replace(t):$.open(t)),this}}const fe=$("route").id("login").path("/login").builder(()=>{const[n,e]=[$.state(""),$.state("")];return[$("div").class("login-container").content([$("h1").content("Login"),$("div").class("username","input-container").content([$("label").for("username").content("Username"),$("input").type("text").id("username").value(n)]),$("div").class("api-key","input-container").content([$("label").for("api-key").content("API Key"),$("input").type("password").id("api-key").value(e)]),$("icon-button").content("Login").on("click",async()=>{await y.used.login(n.value,e.value),y.used.user&&(nt.storageUserData={apiKey:e.value,username:n.value},n.set(""),e.set(""),$.replace("/"))}),$("icon-button").content("Create Account").icon("open-outline").on("click",()=>$.open("https://danbooru.donmai.us/users/new","_blank"))])]});class pe extends f{constructor(){super("drawer");h(this,"$filter",$("div").class("filter"));h(this,"$container",$("div").class("drawer-container"));this.hide(!0),this.build()}build(){this.content([this.$container.content([$("div").class("user-info").hide(!0).self(t=>[y.events.on("login",s=>{t.content([$("div").content([$("h3").class("username").content(s.name$),$("div").class("user-detail").content([$("span").class("userid").content(`ID: ${s.id}`),$("span").class("level").content(["Level: ",s.level_string$])])]),$("div").class("user-nav").content([$("icon-button").title("Uploaded Posts").icon("image").content(s.post_upload_count$.convert(Y)).link(`/posts?tags=user:${s.name}`,!0),$("icon-button").title("Favorites").icon("heart").content(s.favorite_count$.convert(Y)).link(`/posts?tags=ordfav:${s.name}`,!0),$("icon-button").title("Forum Posts").icon("document-text").content(s.forum_post_count$.convert(Y)).hide(!0)])]).hide(!1)}).on("logout",()=>{t.clear().hide(!0)})]),$("div").class("nav").content([$("div").class("login").content([$("icon-button").icon("log-in-outline").content("Login").link("/login",!0)]).self(t=>y.events.on("login",()=>t.hide(!0)).on("logout",()=>t.hide(!1))),$("div").class("logout").hide(!0).content([$("icon-button").icon("log-in-outline").content("Logout").on("dblclick",()=>y.used.logout())]).self(t=>y.events.on("login",()=>t.hide(!1)).on("logout",()=>t.hide(!0)))])]),this.$filter.on("click",()=>$.back())])}open(){this.hide(!1),this.$container.animate({transform:["translateX(100%)","translateX(0%)"]},{fill:"both",duration:300,easing:"ease"}),this.$filter.animate({opacity:[0,1]},{fill:"both",duration:300,easing:"ease"})}close(){this.$container.animate({transform:["translateX(0%)","translateX(100%)"]},{fill:"both",duration:300,easing:"ease"},()=>this.hide(!0)),this.$filter.animate({opacity:[1,0]},{fill:"both",duration:300,easing:"ease"})}checkURL(t,s){(t==null?void 0:t.hash)==="#drawer"&&this.close(),s.hash==="#drawer"&&this.open()}}$.registerTagName("ion-icon",de);$.registerTagName("icon-button",me);$.anchorHandler=n=>{$.open(n.href(),n.target())};const[ut,ge]=[new y({origin:"https://danbooru.donmai.us",name:"Danbooru"}),new y({origin:"https://safebooru.donmai.us",name:"Safebooru"}),new y({origin:"https://testbooru.donmai.us",name:"Testbooru"})];y.set(y.manager.get(y.storageAPI??"")??ut);const At=new ae().hide(!0),Mt=new pe;$(document.body).content([$("nav").content([$("a").class("title").href("/").content([$("h1").class("booru-name").content(y.name$),$("h2").class("app").content([$("span").class("app-name").content("Viewer"),$("span").class("version").content("v0.4.0")])]),$("div").class("searchbar").content(["Search in ",y.name$]).self(n=>L.events.on("stateChange",({beforeURL:e,afterURL:t})=>{e.hash==="#search"&&n.hide(!1),t.hash==="#search"&&n.hide(!0)})).on("click",()=>$.open(location.href+"#search")),$("div").class("buttons").content([$("ion-icon").class("search").name("search-outline").title("Search").self(n=>L.events.on("stateChange",({beforeURL:e,afterURL:t})=>{e.hash==="#search"&&n.hide(!1),t.hash==="#search"&&n.hide(!0)})).on("click",()=>$.open(location.href+"#search")),$("ion-icon").class("switch").name("swap-horizontal").title("Switch Booru").on("click",()=>{y.used===ut?y.set(ge):y.set(ut)}),$("ion-icon").class("open").name("open-outline").title("Open in Original Site").on("click",()=>$.open(location.href.replace(location.origin,y.used.origin))),$("ion-icon").class("menu").name("menu-outline").title("Menu").hide(!1).self(n=>{y.events.on("login",()=>n.hide(!0)).on("logout",()=>n.hide(!1))}).on("click",()=>$.open(location.href+"#drawer")),$("div").class("account").hide(!0).title("Menu").self(n=>{y.events.on("login",e=>{n.content(e.name$.convert(t=>{var s;return((s=t.at(0))==null?void 0:s.toUpperCase())??""})).hide(!1)}).on("logout",()=>n.hide(!0))}).on("click",()=>$.open(location.href+"#drawer"))])]),At,Mt,$("router").base("/").map([$("route").id("posts").path(["/","/posts"]).builder(()=>new wt),$("route").id("posts").path("/posts?tags").builder(({query:n})=>{const e=new wt({tags:n.tags});return[$("header").content([$("h2").content("Posts"),$("div").class("tags").self(t=>{n.tags.split("+").forEach(s=>{t.insert($("a").class("tag").content(decodeURIComponent(s)).href(`posts?tags=${s}`))})})]),$("div").class("no-post").content("No Posts").hide(!0).self(t=>e.on("noPost",()=>t.hide(!1)).on("startLoad",()=>t.hide(!0))),e]}),ie,fe]).on("beforeSwitch",n=>{n.preventDefault();function s(){var a;const r=$.call(()=>{switch(L.navigationDirection){case F.Forward:return["translateX(2%)","translateX(0%)"];case F.Back:return["translateX(-2%)","translateX(0%)"];case F.Replace:return""}});n.$view.content(n.nextContent),n.rendered(),(a=n.nextContent.element)==null||a.class("animated").animate({opacity:[0,1],transform:r},{duration:300,easing:"ease"},()=>{var o;n.switched(),(o=n.nextContent.element)==null||o.removeClass("animated")})}function i(){var a,o;const r=$.call(()=>{switch(L.navigationDirection){case F.Forward:return["translateX(0%)","translateX(-2%)"];case F.Back:return["translateX(0%)","translateX(2%)"];case F.Replace:return""}});(o=(a=n.previousContent)==null?void 0:a.element)==null||o.class("animated").animate({opacity:[1,0],transform:r},{duration:300,easing:"ease"},()=>{var u,c;(c=(u=n.previousContent)==null?void 0:u.element)==null||c.removeClass("animated"),s()})}n.previousContent?i():s()})]);L.events.on("stateChange",({beforeURL:n,afterURL:e})=>kt(n,e));kt(void 0,new URL(location.href));function kt(n,e){At.checkURL(n,e),Mt.checkURL(n,e)} diff --git a/dist/assets/index-La3x4wRW.js b/dist/assets/index-La3x4wRW.js deleted file mode 100644 index 906975b..0000000 --- a/dist/assets/index-La3x4wRW.js +++ /dev/null @@ -1 +0,0 @@ -var kt=Object.defineProperty;var gt=n=>{throw TypeError(n)};var Ct=(n,e,t)=>e in n?kt(n,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):n[e]=t;var h=(n,e,t)=>Ct(n,typeof e!="symbol"?e+"":e,t),$t=(n,e,t)=>e.has(n)||gt("Cannot "+t);var x=(n,e,t)=>($t(n,e,"read from private field"),t?t.call(n):e.get(n)),K=(n,e,t)=>e.has(n)?gt("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(n):e.set(n,t),J=(n,e,t,s)=>($t(n,e,"write to private field"),s?s.call(n,t):e.set(n,t),t);(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const i of document.querySelectorAll('link[rel="modulepreload"]'))s(i);new MutationObserver(i=>{for(const r of i)if(r.type==="childList")for(const a of r.addedNodes)a.tagName==="LINK"&&a.rel==="modulepreload"&&s(a)}).observe(document,{childList:!0,subtree:!0});function t(i){const r={};return i.integrity&&(r.integrity=i.integrity),i.referrerPolicy&&(r.referrerPolicy=i.referrerPolicy),i.crossOrigin==="use-credentials"?r.credentials="include":i.crossOrigin==="anonymous"?r.credentials="omit":r.credentials="same-origin",r}function s(i){if(i.ep)return;i.ep=!0;const r=t(i);fetch(i.href,r)}})();class G{constructor(){h(this,"__hidden",!1);h(this,"domEvents",{});h(this,"parent");h(this,"events",new st)}on(e,t,s){e=w.orArrayResolve(e);for(const i of e){this.domEvents[i]||(this.domEvents[i]=new Map);const r=a=>{t(a,this)};this.domEvents[i].set(t,r),this.events.on(i,t),this.dom.addEventListener(i,r,s)}return this}off(e,t,s){var r;const i=(r=this.domEvents[e])==null?void 0:r.get(t);return i&&this.dom.removeEventListener(e,i,s),this.events.off(e,t),this}once(e,t,s){const i=r=>{this.dom.removeEventListener(e,i,s),t(r,this)};return this.dom.addEventListener(e,i,s),this.events.once(e,t),this}hide(e,t=!0){return w.fluent(this,arguments,()=>this.__hidden,()=>{var s;if(e!==void 0)return e instanceof S?(this.__hidden=e.value,e.use(this,"hide")):this.__hidden=e,t&&((s=this.parent)==null||s.children.render()),this})}remove(){var e;return(e=this.parent)==null||e.children.remove(this).render(),this}replace(e){var t;return(t=this.parent)==null||t.children.replace(this,e).render(),this}contains(e){return e?e instanceof G?this.dom.contains(e.dom):e instanceof EventTarget?this.dom.contains(w(e).dom):this.dom.contains(e):!1}self(e){return e(this),this}inDOM(){return document.contains(this.dom)}isElement(){return this instanceof C}get element(){return this instanceof C?this:null}}class C extends G{constructor(t,s){super();h(this,"dom");h(this,"static_classes",new Set);this.dom=this.createDom(t,s),this.dom.$=this,this.setOptions(s)}createDom(t,s){return s!=null&&s.dom?s.dom:t==="svg"?document.createElementNS("http://www.w3.org/2000/svg","svg"):document.createElement((s==null?void 0:s.tagname)??t)}setOptions(t){return this.id(t==null?void 0:t.id),t&&t.class&&this.class(...t.class),this}id(t){return $.fluent(this,arguments,()=>this.dom.id,()=>$.set(this.dom,"id",t))}class(...t){return $.fluent(this,arguments,()=>this.dom.classList,()=>{this.dom.classList.forEach(s=>this.static_classes.has(s)??this.dom.classList.remove(s)),this.dom.classList.add(...t.detype())})}addClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.add(...t.detype())})}removeClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.remove(...t.detype())})}staticClass(...t){return $.fluent(this,arguments,()=>this.static_classes,()=>{this.removeClass(...this.static_classes),this.static_classes.clear(),this.addStaticClass(...t)})}addStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(s=>this.static_classes.add(s)),this.addClass(...t)})}removeStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(s=>this.static_classes.delete(s)),this.removeClass(...t)})}css(t){return $.fluent(this,arguments,()=>this.dom.style,()=>{Object.assign(this.dom.style,t)})}attribute(t,s){return arguments.length?arguments.length===1?t===void 0?null:this.dom.getAttribute(t):arguments.length===2?t?(s===null?this.dom.removeAttribute(t):s!==void 0&&this.dom.setAttribute(t,`${s}`),this):this:this:null}tabIndex(t){return $.fluent(this,arguments,()=>this.dom.tabIndex,()=>$.set(this.dom,"tabIndex",t))}focus(){return this.dom.focus(),this}blur(){return this.dom.blur(),this}animate(t,s,i){const r=this.dom.animate(t,s);return i&&(r.onfinish=()=>i(r)),r}getAnimations(t){return this.dom.getAnimations(t)}get dataset(){return this.dom.dataset}domRect(t){const s=this.dom.getBoundingClientRect();if(!t)return s;const i=t instanceof C?t.dom.getBoundingClientRect():t;return{...s,top:s.top-i.top,left:s.left-i.left,right:s.right-i.left,bottom:s.bottom-i.top,x:s.x-i.x,y:s.y-i.y}}}class Q extends G{constructor(t){super();h(this,"dom");this.dom=t,this.dom.$=this}domRect(t){const s={bottom:innerHeight,height:innerHeight,left:0,right:innerWidth,top:0,width:innerWidth,x:0,y:0};if(!t)return s;const i=t instanceof C?t.dom.getBoundingClientRect():t;return{...s,top:s.top-i.top,left:s.left-i.left,right:s.right-i.left,bottom:s.bottom-i.top,x:s.x-i.x,y:s.y-i.y}}static from(t){return t.$ instanceof Q?t.$:new Q(t)}}const Rt="modulepreload",Dt=function(n){return"/"+n},yt={},Nt=function(e,t,s){let i=Promise.resolve();if(t&&t.length>0){document.getElementsByTagName("link");const a=document.querySelector("meta[property=csp-nonce]"),o=(a==null?void 0:a.nonce)||(a==null?void 0:a.getAttribute("nonce"));i=Promise.allSettled(t.map(u=>{if(u=Dt(u),u in yt)return;yt[u]=!0;const c=u.endsWith(".css"),d=c?'[rel="stylesheet"]':"";if(document.querySelector(`link[href="${u}"]${d}`))return;const m=document.createElement("link");if(m.rel=c?"stylesheet":Rt,c||(m.as="script"),m.crossOrigin="",m.href=u,o&&m.setAttribute("nonce",o),document.head.appendChild(m),c)return new Promise((b,l)=>{m.addEventListener("load",b),m.addEventListener("error",()=>l(new Error(`Unable to preload CSS for ${u}`)))})}))}function r(a){const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=a,window.dispatchEvent(o),!o.defaultPrevented)throw a}return i.then(a=>{for(const o of a||[])o.status==="rejected"&&r(o.reason);return e().catch(r)})};class Ht{constructor(e){h(this,"$container");h(this,"childList",new Set);this.$container=e}add(e,t=-1){if(t===-1||this.childList.size-1===t)this.childList.add(e);else{const s=[...this.childList];s.splice(t,0,e),this.childList.clear(),s.forEach(i=>this.childList.add(i))}e.parent=this.$container}remove(e){return this.childList.has(e)?(this.childList.delete(e),e.parent=void 0,this):this}removeAll(e=!0){this.childList.forEach(t=>this.remove(t)),e&&this.render()}replace(e,t){const s=this.array;return s.splice(s.indexOf(e),1,t),e.remove(),this.childList.clear(),s.forEach(i=>this.childList.add(i)),t.parent=this.$container,this}render(){const[e,t]=[this.array.map(i=>i.dom),Array.from(this.dom.childNodes)],s=[];for(;t.length||e.length;){const[i,r]=[t.at(0),e.at(0)];r?i?r!==i?(r.$.__hidden||(this.dom.insertBefore(r,i),s.push(r)),e.shift()):(r.$.__hidden&&this.dom.removeChild(r),e.shift(),t.shift()):(r.$.__hidden||this.dom.append(r),e.shift()):(i&&!s.includes(i)&&i.remove(),t.shift())}}indexOf(e){return this.array.indexOf(e)}get array(){return[...this.childList.values()]}get dom(){return this.$container.dom}}class S{constructor(e,t){h(this,"_value");h(this,"attributes",new Map);h(this,"linkStates",new Set);h(this,"options",{});this.set(e),t&&(this.options=t)}set(e){this._value=e,e instanceof S&&e.linkStates.add(this),this.update(),this.linkStates.forEach(t=>t.update())}static toJSON(e){const t={};for(let[s,i]of Object.entries(e))i instanceof S?i=i.toJSON():i instanceof Object&&S.toJSON(i),Object.assign(t,{[s]:i});return t}update(){for(const[e,t]of this.attributes.entries())for(const s of t)e[s]instanceof Function?this.options.format?e[s](this.options.format(this.value)):e[s](this.value):s in e&&(e[s]=this.value)}use(e,t){const s=this.attributes.get(e);s?s.add(t):this.attributes.set(e,new Set().add(t))}convert(e){return new S(this,{format:e})}get value(){return this._value instanceof S?this._value.value:this._value}toString(){return this.options.format?this.options.format(this.value):this.value instanceof Object?JSON.stringify(this.toJSON()):`${this.value}`}toJSON(){return this.value instanceof S?this.value.toJSON():this.value instanceof Object?S.toJSON(this.value):this.toString()}}class X extends G{constructor(t){super();h(this,"dom");this.dom=new Text(t),this.dom.$=this}content(t){return $.fluent(this,arguments,()=>this.dom.textContent,()=>$.set(this.dom,"textContent",t))}}class Z extends C{constructor(e,t){super(e,t)}autocapitalize(e){return $.fluent(this,arguments,()=>this.dom.autocapitalize,()=>$.set(this.dom,"autocapitalize",e))}innerText(e){return $.fluent(this,arguments,()=>this.dom.innerText,()=>$.set(this.dom,"innerText",e))}title(e){return $.fluent(this,arguments,()=>this.dom.title,()=>$.set(this.dom,"title",e))}dir(e){return $.fluent(this,arguments,()=>this.dom.dir,()=>$.set(this.dom,"dir",e))}translate(e){return $.fluent(this,arguments,()=>this.dom.translate,()=>$.set(this.dom,"translate",e))}popover(e){return $.fluent(this,arguments,()=>this.dom.popover,()=>$.set(this.dom,"popover",e))}spellcheck(e){return $.fluent(this,arguments,()=>this.dom.spellcheck,()=>$.set(this.dom,"spellcheck",e))}inert(e){return $.fluent(this,arguments,()=>this.dom.inert,()=>$.set(this.dom,"inert",e))}lang(e){return $.fluent(this,arguments,()=>this.dom.lang,()=>$.set(this.dom,"lang",e))}draggable(e){return $.fluent(this,arguments,()=>this.dom.draggable,()=>$.set(this.dom,"draggable",e))}hidden(e){return $.fluent(this,arguments,()=>this.dom.hidden,()=>$.set(this.dom,"hidden",e))}click(){return this.dom.click(),this}attachInternals(){return this.dom.attachInternals()}hidePopover(){return this.dom.hidePopover(),this}showPopover(){return this.dom.showPopover(),this}togglePopover(){return this.dom.togglePopover(),this}get accessKeyLabel(){return this.dom.accessKeyLabel}get offsetHeight(){return this.dom.offsetHeight}get offsetLeft(){return this.dom.offsetLeft}get offsetParent(){return $(this.dom.offsetParent)}get offsetTop(){return this.dom.offsetTop}get offsetWidth(){return this.dom.offsetWidth}}class f extends Z{constructor(t,s){super(t,s);h(this,"children",new Ht(this));h(this,"__position_cursor",0)}content(t){return $.fluent(this,arguments,()=>this,()=>{this.children.removeAll(!1),this.insert(t)})}insert(t,s=-1){return $.fluent(this,arguments,()=>this,async()=>{if(t instanceof Function){let i=t(this);i instanceof Promise?t=await i:t=i}else t instanceof Promise&&(t=await t);t=$.orArrayResolve(t),this.__position_cursor=s<0?this.children.array.length+s:s;for(const i of t)if(i!=null){if(i instanceof Array)this.insert(i,this.__position_cursor);else if(typeof i=="string")this.children.add(new X(i),s);else if(i instanceof S){const r=new X(i.toString());i.use(r,"content"),this.children.add(r,s)}else if(i instanceof Promise){const r=(await Nt(async()=>{const{$Async:o}=await Promise.resolve().then(()=>Xt);return{$Async:o}},void 0)).$Async,a=new r().await(i);this.children.add(a,s)}else this.children.add(i,s);this.__position_cursor+=1}this.children.render()})}clear(){return this.children.removeAll(),this}$(t){return $(this.dom.querySelector(t))}$all(t){return Array.from(this.dom.querySelectorAll(t)).map(s=>$(s))}get scrollHeight(){return this.dom.scrollHeight}get scrollWidth(){return this.dom.scrollWidth}scrollTop(t){return $.fluent(this,arguments,()=>this.dom.scrollTop,()=>$.set(this.dom,"scrollTop",t))}scrollLeft(t){return $.fluent(this,arguments,()=>this.dom.scrollLeft,()=>$.set(this.dom,"scrollLeft",t))}}class Vt extends f{constructor(e){super("a",e),this.dom.addEventListener("click",t=>{$.anchorHandler&&this.href()&&(t.preventDefault(),$.anchorHandler(this,t))})}href(e){return $.fluent(this,arguments,()=>this.dom.href,()=>$.set(this.dom,"href",e))}target(e){return $.fluent(this,arguments,()=>this.dom.target??void 0,()=>{e&&(this.dom.target=e)})}}class jt extends C{constructor(e,t){super(e,t)}}var I;(n=>{function e(o,u,c,d){return u.length?(d(),o):c()}n.fluent=e;function t(o){return o instanceof Array?o:[o]}n.orArrayResolve=t;function s(o,u){return t(u).forEach(c=>{Object.getOwnPropertyNames(c.prototype).forEach(d=>{d!=="constructor"&&Object.defineProperty(o.prototype,d,Object.getOwnPropertyDescriptor(c.prototype,d)||Object.create(null))})}),o}n.mixin=s;function i(o,u,c){c!==void 0&&(o[u]=c)}n.set=i;function r(o){return new S(o)}n.state=r;function a(o){if(o.$)return o.$;if(o.nodeName.toLowerCase()==="body")return new f("body",{dom:o});if(o.nodeName.toLowerCase()==="#document")return Q.from(o);if(o instanceof HTMLElement){const u=$.TagNameElementMap[o.tagName.toLowerCase()],c=u===f?new u(o.tagName,{dom:o}):new u({dom:o});if(c instanceof f)for(const d of Array.from(c.dom.childNodes))c.children.add($(d));return c}else if(o instanceof Text){const u=new X(o.textContent??"");return u.dom=o,u}else if(o instanceof SVGElement&&o.tagName.toLowerCase()==="svg")return new jt("svg",{dom:o});throw`$NODE.FROM: NOT SUPPORT TARGET ELEMENT TYPE (${o.nodeName})`}n.from=a})(I||(I={}));class A{static create(...e){const t=class{};return Object.getOwnPropertyNames(A.prototype).forEach(s=>{s!=="constructor"&&e.includes(s)&&Object.defineProperty(t.prototype,s,Object.getOwnPropertyDescriptor(A.prototype,s)||Object.create(null))}),t}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}formAction(e){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",e))}formEnctype(e){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",e))}formMethod(e){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",e))}formNoValidate(e){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",e))}formTarget(e){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",e))}autocomplete(e){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",e))}name(e){return $.fluent(this,arguments,()=>this.dom.name,()=>$.set(this.dom,"name",e))}maxLength(e){return $.fluent(this,arguments,()=>this.dom.maxLength,()=>$.set(this.dom,"maxLength",e))}minLength(e){return $.fluent(this,arguments,()=>this.dom.minLength,()=>$.set(this.dom,"minLength",e))}required(e){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",e))}label(e){return $.fluent(this,arguments,()=>this.dom.label,()=>$.set(this.dom,"label",e))}get form(){return this.dom.form?$(this.dom.form):null}get validationMessage(){return this.dom.validationMessage}get validity(){return this.dom.validity}get willValidate(){return this.dom.willValidate}}class lt extends f{constructor(e){super("button",e)}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}}I.mixin(lt,A.create("disabled","checkValidity","formAction","formEnctype","formMethod","formNoValidate","formTarget","reportValidity"));class wt extends f{constructor(e){super("form",e)}action(e){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",e))}enctype(e){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",e))}method(e){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",e))}noValidate(e){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",e))}acceptCharset(e){return $.fluent(this,arguments,()=>this.dom.acceptCharset,()=>$.set(this.dom,"acceptCharset",e))}target(e){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",e))}requestSubmit(){return this.dom.requestSubmit(),this}reset(){return this.dom.reset(),this}submit(){return this.dom.submit(),this}get length(){return this.dom.length}get elements(){return Array.from(this.dom.elements).map(e=>$(e))}}I.mixin(wt,A.create("checkValidity","reportValidity","autocomplete"));class D extends Z{constructor(e){super("input",e)}value(e){return $.fluent(this,arguments,()=>this.type()==="number"?Number(this.dom.value):this.dom.value,()=>$.set(this.dom,"value",e,t=>{this.on("input",()=>{t.attributes.has(this.dom)!==!1&&(typeof t.value=="string"&&t.set(`${this.value()}`),typeof t.value=="number"&&t.set(Number(this.value())))})}))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}capture(e){return $.fluent(this,arguments,()=>this.dom.capture,()=>$.set(this.dom,"capture",e))}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}pattern(e){return $.fluent(this,arguments,()=>this.dom.pattern,()=>$.set(this.dom,"pattern",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}size(e){return $.fluent(this,arguments,()=>this.dom.size,()=>$.set(this.dom,"size",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}valueAsDate(e){return $.fluent(this,arguments,()=>this.dom.valueAsDate,()=>$.set(this.dom,"valueAsDate",e))}valueAsNumber(e){return $.fluent(this,arguments,()=>this.dom.valueAsNumber,()=>$.set(this.dom,"valueAsNumber",e))}webkitdirectory(e){return $.fluent(this,arguments,()=>this.dom.webkitdirectory,()=>$.set(this.dom,"webkitdirectory",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,s,i){return typeof t=="number"&&typeof s=="number"&&this.dom.setRangeText(e,t,s,i),this.dom.setRangeText(e),this}setSelectionRange(e,t,s){return this.dom.setSelectionRange(e,t,s),this}showPicker(){return this.dom.showPicker(),this}get files(){return this.dom.files}get webkitEntries(){return this.dom.webkitEntries}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}I.mixin(D,A.create("checkValidity","reportValidity","autocomplete","name","form","required","validationMessage","validity","willValidate","formAction","formEnctype","formMethod","formNoValidate","formTarget"));class Ut extends D{constructor(e){super(e),this.type("number")}static from(e){return $.mixin(D,this)}stepDown(){return this.dom.stepDown(),this}stepUp(){return this.dom.stepUp(),this}max(e){return $.fluent(this,arguments,()=>this.dom.max===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"max",e==null?void 0:e.toString()))}min(e){return $.fluent(this,arguments,()=>this.dom.min===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"min",e==null?void 0:e.toString()))}step(e){return $.fluent(this,arguments,()=>Number(this.dom.step),()=>$.set(this.dom,"step",e==null?void 0:e.toString()))}}class Ft extends D{constructor(e){super(e),this.type("radio")}static from(e){return $.mixin(D,this)}checked(e){return $.fluent(this,arguments,()=>this.dom.checked,()=>$.set(this.dom,"checked",e))}defaultChecked(e){return $.fluent(this,arguments,()=>this.dom.defaultChecked,()=>$.set(this.dom,"defaultChecked",e))}}class Wt extends D{constructor(e){super(e),this.type("file")}static from(e){return $.mixin(D,this)}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}accept(...e){return $.fluent(this,arguments,()=>this.dom.accept.split(","),()=>this.dom.accept=e.toString())}}I.mixin(D,[Ut,Ft,Wt]);class bt extends f{constructor(e){super("label",e)}for(e){return $.fluent(this,arguments,()=>this.dom.htmlFor,()=>{$.set(this.dom,"htmlFor",e)})}get control(){return this.dom.control}}I.mixin(bt,A.create("form"));class Gt extends Z{constructor(e){super("img",e)}async load(e){return new Promise(t=>{const s=this.once("load",()=>{t(s)});typeof e=="string"?s.src(e):e.then(i=>s.src(i))})}static resize(e,t){return new Promise(s=>{const i=new Image;if(i.addEventListener("load",()=>{const r=document.createElement("canvas"),a=r.getContext("2d");if(!a)throw"$Image.resize: context undefined";const o=i.width/i.height,[u,c,d]=[o>1,o<1,o===1],m=t instanceof Array?t[0]:c?t:t*o,b=t instanceof Array?t[1]:u?t:t/o;r.height=b,r.width=m,a.drawImage(i,0,0,m,b),s(r.toDataURL())},{once:!0}),e instanceof File){const r=new FileReader;r.addEventListener("load",()=>i.src=r.result),r.readAsDataURL(e)}else i.src=e})}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}crossOrigin(e){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",e))}decoding(e){return $.fluent(this,arguments,()=>this.dom.decoding,()=>$.set(this.dom,"decoding",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}isMap(e){return $.fluent(this,arguments,()=>this.dom.isMap,()=>$.set(this.dom,"isMap",e))}loading(e){return $.fluent(this,arguments,()=>this.dom.loading,()=>$.set(this.dom,"loading",e))}referrerPolicy(e){return $.fluent(this,arguments,()=>this.dom.referrerPolicy,()=>$.set(this.dom,"referrerPolicy",e))}sizes(e){return $.fluent(this,arguments,()=>this.dom.sizes,()=>$.set(this.dom,"sizes",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}srcset(e){return $.fluent(this,arguments,()=>this.dom.srcset,()=>$.set(this.dom,"srcset",e))}useMap(e){return $.fluent(this,arguments,()=>this.dom.useMap,()=>$.set(this.dom,"useMap",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}decode(){return this.dom.decode()}get complete(){return this.dom.complete}get currentSrc(){return this.dom.currentSrc}get naturalHeight(){return this.dom.naturalHeight}get naturalWidth(){return this.dom.naturalWidth}get x(){return this.dom.x}get y(){return this.dom.y}}class qt extends f{constructor(e){super("canvas",e)}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>{$.set(this.dom,"height",e)})}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>{$.set(this.dom,"width",e)})}captureStream(e){return this.dom.captureStream(e)}getContext(e,t){return this.dom.getContext(e)}toBlob(e,t,s){return this.dom.toBlob(e,t,s),this}toDataURL(e,t){return this.dom.toDataURL(e,t)}transferControlToOffscreen(){return this.dom.transferControlToOffscreen()}}class zt extends f{constructor(e){super("dialog",e)}open(e){return $.fluent(this,arguments,()=>this.dom.open,()=>$.set(this.dom,"open",e))}returnValue(e){return $.fluent(this,arguments,()=>this.dom.returnValue,()=>$.set(this.dom,"returnValue",e))}close(){return this.dom.close(),this}show(){return this.dom.show(),this}showModal(){return this.dom.showModal(),this}}class _t extends f{constructor(e){super("select")}add(e){return this.insert(e),this}item(e){return $(this.dom.item(e))}namedItem(e){return $(this.dom.namedItem(e))}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}get length(){return this.dom.length}get size(){return this.dom.size}get options(){return Array.from(this.dom.options).map(e=>$(e))}get selectedIndex(){return this.dom.selectedIndex}get selectedOptions(){return Array.from(this.dom.selectedOptions).map(e=>$(e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e,t=>{this.on("input",()=>{t.attributes.has(this.dom)!==!1&&(typeof t.value=="string"&&t.set(`${this.value()}`),typeof t.value=="number"&&t.set(Number(this.value())))})}))}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}I.mixin(_t,A.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","validationMessage","validity","willValidate"));class Tt extends f{constructor(e){super("option",e)}defaultSelected(e){return $.fluent(this,arguments,()=>this.dom.defaultSelected,()=>$.set(this.dom,"defaultSelected",e))}selected(e){return $.fluent(this,arguments,()=>this.dom.selected,()=>$.set(this.dom,"selected",e))}text(e){return $.fluent(this,arguments,()=>this.dom.text,()=>$.set(this.dom,"text",e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e))}get form(){return this.dom.form?$(this.dom.form):null}get index(){return this.dom.index}}I.mixin(Tt,A.create("form","disabled","label"));class St extends f{constructor(e){super("optgroup",e)}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}}I.mixin(St,A.create("disabled","label"));class It extends f{constructor(e){super("textarea",e)}cols(e){return $.fluent(this,arguments,()=>this.dom.cols,()=>$.set(this.dom,"cols",e))}wrap(e){return $.fluent(this,arguments,()=>this.dom.wrap,()=>$.set(this.dom,"wrap",e))}value(e){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,s,i){return typeof t=="number"&&typeof s=="number"&&this.dom.setRangeText(e,t,s,i),this.dom.setRangeText(e),this}setSelectionRange(e,t,s){return this.dom.setSelectionRange(e,t,s),this}get labels(){return Array.from(this.dom.labels??[]).map(e=>$(e))}}I.mixin(It,A.create("checkValidity","reportValidity","autocomplete","name","form","required","disabled","minLength","maxLength","validationMessage","validity","willValidate"));var et;class Ot extends f{constructor(t){super("async",t);K(this,et,!1)}await(t){return t instanceof Function?t(this).then(s=>this._loaded(s)):t.then(s=>this._loaded(s)),this}_loaded(t){if(J(this,et,!0),typeof t=="string")this.replace(new X(t));else if(t instanceof S){const s=new X(t.toString());t.use(s,"content"),this.replace(s)}else t==null?this.replace(new X(String(t))):this.replace(t);this.dom.dispatchEvent(new Event("load"))}get loaded(){return x(this,et)}}et=new WeakMap;const Xt=Object.freeze(Object.defineProperty({__proto__:null,$Async:Ot},Symbol.toStringTag,{value:"Module"}));class Bt extends C{constructor(e,t){super(e,t)}autoplay(e){return $.fluent(this,arguments,()=>this.dom.autoplay,()=>$.set(this.dom,"autoplay",e))}get buffered(){return this.dom.buffered}controls(e){return $.fluent(this,arguments,()=>this.dom.controls,()=>$.set(this.dom,"controls",e))}crossOrigin(e){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",e))}get currentSrc(){return this.dom.currentSrc}currentTime(e){return $.fluent(this,arguments,()=>this.dom.currentTime,()=>$.set(this.dom,"currentTime",e))}defaultMuted(e){return $.fluent(this,arguments,()=>this.dom.defaultMuted,()=>$.set(this.dom,"defaultMuted",e))}defaultPlaybackRate(e){return $.fluent(this,arguments,()=>this.dom.defaultPlaybackRate,()=>$.set(this.dom,"defaultPlaybackRate",e))}disableRemotePlayback(e){return $.fluent(this,arguments,()=>this.dom.disableRemotePlayback,()=>$.set(this.dom,"disableRemotePlayback",e))}get duration(){return this.dom.duration}get ended(){return this.dom.ended}get error(){return this.dom.error}loop(e){return $.fluent(this,arguments,()=>this.dom.loop,()=>$.set(this.dom,"loop",e))}mediaKeys(e){return $.fluent(this,arguments,()=>this.dom.mediaKeys,()=>$.set(this.dom,"setMediaKeys",[e]))}muted(e){return $.fluent(this,arguments,()=>this.dom.muted,()=>$.set(this.dom,"muted",e))}get networkState(){return this.dom.networkState}get paused(){return this.dom.paused}playbackRate(e){return $.fluent(this,arguments,()=>this.dom.playbackRate,()=>$.set(this.dom,"playbackRate",e))}get played(){return this.dom.played}preload(e){return $.fluent(this,arguments,()=>this.dom.preload,()=>$.set(this.dom,"preload",e))}preservesPitch(e){return $.fluent(this,arguments,()=>this.dom.preservesPitch,()=>$.set(this.dom,"preservesPitch",e))}get readyState(){return this.dom.readyState}get remote(){return this.dom.remote}get seekable(){return this.dom.seekable}get seeking(){return this.dom.seeking}sinkId(e){return $.fluent(this,arguments,()=>this.dom.sinkId,()=>$.set(this.dom,"setSinkId",[e]))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}srcObject(e){return $.fluent(this,arguments,()=>this.dom.srcObject,()=>$.set(this.dom,"srcObject",e))}get textTracks(){return this.dom.textTracks}volume(e){return $.fluent(this,arguments,()=>this.dom.volume,()=>$.set(this.dom,"volume",e))}addTextTrack(e,t,s){return this.dom.addTextTrack(e,t,s)}canPlayType(e){return this.dom.canPlayType(e)}fastSeek(e){return this.dom.fastSeek(e),this}load(){return this.dom.load(),this}pause(){return this.dom.pause(),this}async play(){return await this.dom.play(),this}get isPlaying(){return this.currentTime()>0&&!this.paused&&!this.ended&&this.readyState>2}}class Kt extends Bt{constructor(e){super("video",e)}disablePictureInPicture(e){return $.fluent(this,arguments,()=>this.dom.disablePictureInPicture,()=>$.set(this.dom,"disablePictureInPicture",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}playsInline(e){return $.fluent(this,arguments,()=>this.dom.playsInline,()=>$.set(this.dom,"playsInline",e))}poster(e){return $.fluent(this,arguments,()=>this.dom.poster,()=>$.set(this.dom,"poster",e))}get videoHeight(){return this.dom.videoHeight}get videoWidth(){return this.dom.videoWidth}cancelVideoFrameCallback(e){return this.dom.cancelVideoFrameCallback(e),this}getVideoPlaybackQuality(){return this.dom.getVideoPlaybackQuality()}requestPictureInPicture(){return this.dom.requestPictureInPicture()}requestVideoFrameCallback(e){return this.dom.requestVideoFrameCallback(e)}}function w(n){if(typeof n>"u"||n===null||n instanceof G)return n;if(typeof n=="string"){if(n.startsWith("::"))return Array.from(document.querySelectorAll(n.replace(/^::/,""))).map(e=>w(e));if(n.startsWith(":"))return w(document.querySelector(n.replace(/^:/,"")));if(n in w.TagNameElementMap){const e=w.TagNameElementMap[n];return e===Z?new Z(n):e===f?new f(n):new e}else return new f(n)}if(n instanceof Node)return n.$?n.$:I.from(n);throw`$: NOT SUPPORT TARGET ELEMENT TYPE ('${n}')`}(n=>{n.anchorHandler=null,n.TagNameElementMap={html:f,head:f,document:Q,body:f,a:Vt,p:f,pre:f,code:f,blockquote:f,strong:f,h1:f,h2:f,h3:f,h4:f,h5:f,h6:f,div:f,ol:f,ul:f,dl:f,li:f,input:D,label:bt,button:lt,form:wt,img:Gt,dialog:zt,canvas:qt,select:_t,option:Tt,optgroup:St,textarea:It,video:Kt,async:Ot};function e(l,p,v,T){return p.length?(T(),l):v()}n.fluent=e;function t(l){return l instanceof Array?l:[l]}n.orArrayResolve=t;function s(l,p){return I.mixin(l,p)}n.mixin=s;function i(l,p,v,T){if(v!==void 0){if(v instanceof S){v.use(l,p),l[p]instanceof Function?l[p](...v.value):l[p]=v.value,T&&T(v);return}l[p]instanceof Function?l[p](...v):l[p]=v}}n.set=i;function r(l,p){return new S(l,p)}n.state=r;async function a(l,p){return new Promise(v=>{const T=new FileReader;T.onload=O=>{const _=n("img");if(_.once("load",R=>{const j=n("canvas"),U=j.getContext("2d"),N=_.height()/_.width(),[M,q]=[N>1?p/N:p,N>1?p:p*N];j.height(q).width(M),U==null||U.drawImage(_.dom,0,0,M,q),v(j.toDataURL(l.type))}),!O.target)throw"$.resize(): e.target is null";_.src(O.target.result)},T.readAsDataURL(l)})}n.resize=a;function o(l=1){return parseInt(getComputedStyle(document.documentElement).fontSize)*l}n.rem=o;function u(l){const p=new DOMParser().parseFromString(l,"text/html").body;return Array.from(p.children).map(v=>n(v))}n.html=u;function c(l,p,v){if(typeof p=="number")return Array(p).fill("").map(O=>{const _=T(l)?l[0](...l.slice(1)):n(l);return v&&v(_),_});{const O=[];for(const _ of p){const R=l instanceof Function?l(..._):T(l)?l[0](...l.slice(1)):n(l);_ instanceof Function?_(R):(_ instanceof G||typeof _=="string")&&R.content(_),O.push(R)}return O}function T(O){return O instanceof Array&&O[0]instanceof Function}}n.builder=c;function d(l,p){return Object.assign(n.TagNameElementMap,{[l]:p}),n.TagNameElementMap}n.registerTagName=d;function m(...l){return new st}n.events=m;function b(l){return l()}n.call=b})(w||(w={}));globalThis.$=w;class st{constructor(){h(this,"eventMap",new Map)}fire(e,...t){var s;return(s=this.eventMap.get(e))==null||s.forEach(i=>i(...t)),this}on(e,t){const s=this.eventMap.get(e)??this.eventMap.set(e,new Set).get(e);return s==null||s.add(t),this}off(e,t){var s;return(s=this.eventMap.get(e))==null||s.delete(t),this}once(e,t){const s=(...r)=>{var a;(a=this.eventMap.get(e))==null||a.delete(s),t(...r)},i=this.eventMap.get(e)??this.eventMap.set(e,new Set).get(e);return i==null||i.add(s),this}}Array.prototype.detype=function(...n){return this.filter(e=>{if(n.length)for(const t of n)return typeof e!=typeof t;else return e!==void 0})};Object.defineProperties(Set.prototype,{array:{get:function(){return Array.from(this)}}});Set.prototype.sort=function(n){return this.array.sort(n)};class xt extends f{constructor(t){super("layout",t);h(this,"_property",{ROW_MAX_HEIGHT:200,GAP:0,IS_RENDERING:!1,RENDER_REQUEST:!1,COLUNM:1,TYPE:"justified",ROOT:null,ITEM_PROPERTIES:new Map});this.css({display:"block",position:"relative"}),new ResizeObserver(s=>{this.inDOM()&&(this.render(),this.dom.dispatchEvent(new Event("resize")))}).observe(this.dom),document.addEventListener("scroll",s=>{s.target===this.root().dom&&this.scrollCompute()},{passive:!0}),new IntersectionObserver(s=>{this.inDOM()&&this.render()}).observe(this.dom)}type(t){return $.fluent(this,arguments,()=>this._property.TYPE,()=>$.set(this._property,"TYPE",t))}maxHeight(t){return $.fluent(this,arguments,()=>this._property.ROW_MAX_HEIGHT,()=>$.set(this._property,"ROW_MAX_HEIGHT",t))}column(t){return $.fluent(this,arguments,()=>this._property.COLUNM,()=>$.set(this._property,"COLUNM",t))}gap(t){return $.fluent(this,arguments,()=>this._property.GAP,()=>$.set(this._property,"GAP",t))}root(t){return $.fluent(this,arguments,()=>this._property.ROOT??$(document),()=>$.set(this._property,"ROOT",t))}get COL_WIDTH(){return(this.offsetWidth-this._property.GAP*(this._property.COLUNM-1))/this._property.COLUNM}justifiedCompute(){const t=[],s=this.offsetWidth;for(const i of this.children.array){const r=$(i);if(!(r instanceof C))continue;const a=r.attribute("layout-item-ratio"),o=a?parseFloat(a):r.dom.offsetWidth/r.dom.offsetHeight,u={$node:r,ratio:o};let c=t.at(-1);(!c||c.heightd+=l.ratio);const m=d+o,b=(s-this._property.GAP*c.items.length)/m;c.items.push(u),c.ratio=m,c.height=b}return t}waterfallCompute(){const t=[],s=this.COL_WIDTH,i=()=>{if(t.lengthr.height-a.height)[0]};for(const r of this.children.array){const a=$(r);if(!(a instanceof C))continue;const o=a.attribute("layout-item-ratio"),u=o?parseFloat(o):a.dom.offsetWidth/a.dom.offsetHeight,c={$node:a,ratio:u},d=i();let m=0;d.items.forEach(p=>m+=p.ratio);const b=s/(d.height+s/u),l=s/b;d.items.push(c),d.ratio=b,d.height=l}return t}render(){if(!this.inDOM())return this;if(this._property.ITEM_PROPERTIES.clear(),this._property.TYPE==="justified"){const t=this.justifiedCompute();let s=0;for(const i of t){let r=0;i.height>this._property.ROW_MAX_HEIGHT&&(i.height=this._property.ROW_MAX_HEIGHT);for(const a of i.items){const o=a.ratio*i.height;a.$node.css({position:"absolute",height:`${i.height}px`,width:`${o}px`,top:`${s}px`,left:`${r}px`}),a.$node.attribute("layout-item-ratio",a.ratio),this._property.ITEM_PROPERTIES.set(a.$node,{height:i.height,width:o,top:s,left:r,ratio:a.ratio,$node:a.$node}),r+=i.height*a.ratio+this._property.GAP}s+=i.height+this._property.GAP}this.css({height:`${s}px`})}else if(this._property.TYPE="waterfall"){const t=this.waterfallCompute(),s=this.COL_WIDTH;let i=0;for(const r of t){let a=0;for(const o of r.items){const u=s/o.ratio;o.$node.css({position:"absolute",height:`${u}px`,width:`${s}px`,top:`${a}px`,left:`${i}px`}),o.$node.attribute("layout-item-ratio",o.ratio),this._property.ITEM_PROPERTIES.set(o.$node,{height:u,width:s,top:a,left:i,ratio:o.ratio,$node:o.$node}),a+=u+this._property.GAP}i+=s+this._property.GAP}if(t.length){const r=t.sort((a,o)=>o.height-a.height)[0];this.css({height:`${r.height+r.items.length*this._property.GAP}px`})}else this.css({height:""})}return this.scrollCompute(),this}scrollCompute(){if(this.inDOM()===!1)return;const t=document.documentElement.scrollTop-this.dom.offsetTop;this._property.ITEM_PROPERTIES.forEach((s,i)=>{const r=s.top;s.top+s.height>t&&r{this.contentId=t,this.events.fire("rendered",{$view:this,previousContent:i,nextContent:s})},o=()=>{this.events.fire("afterSwitch",{$view:this,previousId:t})};return this.events.fire("beforeSwitch",{$view:this,preventDefault:()=>r=!0,targetId:t,previousContent:i,nextContent:s,switched:o,rendered:a}),r||(this.content(s),a(),o()),this}get currentContent(){if(this.contentId)return this.viewCache.get(this.contentId)}}$.registerTagName("view",Et);var H;const g=class g extends Et{constructor(t){super({tagname:"router",...t});K(this,H,"");h(this,"routes",new Map);g.routers.add(this)}base(t){return $.fluent(this,arguments,()=>x(this,H),()=>{J(this,H,t??x(this,H))})}map(t){t=$.orArrayResolve(t);for(const s of t)s instanceof Array?this.map(s):this.routes.set(s.path(),s);return this.resolve(),this}resolve(){return new Promise(t=>{if(!location.pathname.startsWith(x(this,H)))return t(2);const s=location.pathname.replace(x(this,H),"/").replace("//","/"),i=s.split("/").map(p=>`/${p}`),r=location.search,a=new Map(r.replace("?","").split("&").map(p=>p.split("="))),u=(()=>{const p=[];for(const[v,T]of this.routes){const O=$.orArrayResolve(v);for(const _ of O){let R=0,j={},U={};const N=_.split("/").map(M=>`/${M}`);if(!(i.lengthObject.assign(U,{[pt]:a.get(pt)})),q.startsWith("/:")){R++,Object.assign(j,{[q.replace("/:","")]:i[M].replace("/","")});continue}else if(_.startsWith("#")&&_===location.hash){R++;continue}else if(q===i[M]){R++;continue}else break}p.push({deep:R,$route:T,params:j,query:U,pathId:Object.keys(U).length!==0?s+r:Object.keys(j).length!==0?s:O[0]})}}}return p.sort((v,T)=>T.deep-v.deep).at(0)})();if(!u)return t(1);const{$route:c,params:d,pathId:m,query:b}=u;if(m===this.contentId)return t(0);this.events.once("rendered",({nextContent:p,previousContent:v})=>{v==null||v.events.fire("afterShift",{$route:v}),p.events.fire("rendered",{$route:p}),t(0)});const l=this.viewCache.get(m)??c.build({params:d,query:b});this.viewCache.has(m)||this.setView(m,l),this.events.once("beforeSwitch",()=>{var p;l.events.fire("beforeShift",{$route:l}),(p=this.currentContent)==null||p.events.fire("beforeShift",{$route:this.currentContent})}),this.events.once("afterSwitch",()=>l.events.fire("afterShift",{$route:l})),this.switchView(m)})}static init(){if(!history.state||!("index"in history.state)){const t={index:g.historyIndex};history.replaceState(t,"")}else g.historyIndex=history.state.index;return g.navigationDirection=0,g.resolve(),window.addEventListener("popstate",()=>g.popstate()),window.addEventListener("scroll",()=>{this.setScrollHistory(this.historyIndex,location.href,document.documentElement.scrollTop)},{passive:!0}),history.scrollRestoration="manual",this}static open(t,s){return t===void 0?this:(t=this.urlResolver(t),t.href===this.url.href?this:t.origin!==this.url.origin?(window.open(t,s),this):(g.clearForwardScrollHistory(),g.historyIndex++,history.pushState(g.historyState,"",t),g.stateChange(0),g.resolve(),this))}static back(){return this.historyIndex--,history.back(),this}static replace(t){return t===void 0?this:(t=this.urlResolver(t),history.replaceState(g.historyState,"",t),this.stateChange(2),this.setScrollHistory(this.historyIndex,location.href,0),g.resolve(),this)}static urlResolver(t){return t instanceof URL?t:(t.startsWith("/")&&(t=`${location.origin}${t}`),t.startsWith("#")&&(t=`${location.origin}${location.pathname}${t}`),new URL(t))}static popstate(){const t=history.state.index>g.historyIndex?0:history.state.indext.resolve())),this.scrollRestoration(),this.setScrollHistory(this.historyIndex,location.href,document.documentElement.scrollTop)}static get historyState(){return{index:g.historyIndex}}static stateChange(t){const s=this.url,i=new URL(location.href);this.url=i,g.events.fire("stateChange",{beforeURL:s,afterURL:i,direction:t}),g.navigationDirection=t}static setScrollHistory(t,s,i){const r=this.getScrollHistory();if(!r)return sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify({[t]:{url:s,value:i}}));r[t]={url:s,value:i},sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify(r))}static getScrollHistory(){const t=sessionStorage.getItem(this.scrollHistoryKey);if(t)return JSON.parse(t)}static clearForwardScrollHistory(){const t=this.getScrollHistory();if(t)for(const s in t)Number(s)>this.historyIndex&&delete t[s],sessionStorage.setItem(this.scrollHistoryKey,JSON.stringify(t))}static scrollRestoration(){const t=this.getScrollHistory();if(t&&t[this.historyIndex])document.documentElement.scrollTop=t[this.historyIndex].value??0;else if(location.hash.length){const s=$(document.body).$(location.hash);s&&(document.documentElement.scrollTop=s.dom.offsetTop)}else document.documentElement.scrollTop=0}};H=new WeakMap,h(g,"routers",new Set),h(g,"events",new st),h(g,"navigationDirection"),h(g,"historyIndex",0),h(g,"url",new URL(location.href)),h(g,"scrollHistoryKey","$ROUTER_SCROLL_HISTORY");let L=g;var F=(n=>(n[n.Forward=0]="Forward",n[n.Back=1]="Back",n[n.Replace=2]="Replace",n))(F||{});L.init();var B,V;const mt=class mt extends f{constructor(t){super("route",t);K(this,B,"");K(this,V);h(this,"rendered",!1)}path(t){return $.fluent(this,arguments,()=>x(this,B),()=>J(this,B,t??x(this,B)))}builder(t){return J(this,V,t),this}render(t){return x(this,V)&&this.content(x(this,V).call(this,{$route:this,params:t.params,query:t.query})),this.rendered=!0,this}build(t){return new mt({dom:this.dom.cloneNode()}).self(s=>{x(this,V)&&s.builder(x(this,V)).render({params:t.params,query:t.query})})}};B=new WeakMap,V=new WeakMap;let ct=mt;$.registerTagName("router",L);$.registerTagName("route",ct);Object.assign($,{open(n,e){return L.open(n,e)},replace(n){return L.replace(n)},back(){return L.back()}});class z{constructor(e,t,s=!0){h(this,"name$",$.state("..."));h(this,"post_upload_count$",$.state(0));h(this,"level$",$.state(10));h(this,"level_string$",$.state("..."));h(this,"booru");this.booru=e,Object.assign(this,t),s&&this.update$()}static async fetch(e,t){var r;const s=await fetch(`${e.origin}/users/${t}.json`).then(async a=>await a.json()),i=((r=this.manager.get(s.id))==null?void 0:r.update(s))??new this(e,s);return this.manager.set(i.id,i),i}static async fetchMultiple(e,t,s=200){let i="";if(t)for(const[u,c]of Object.entries(t))if(c instanceof Array)i+=`&search[${u}]=${c}`;else if(c instanceof Object)for(const[d,m]of Object.entries(c))i+=`&search[${u}${d}]=${m}`;else i+=`&search[${u}]=${c}`;return(await(await fetch(`${e.origin}/users.json?limit=${s}${i}`)).json()).map(u=>{const c=new this(e,u);return this.manager.set(c.id,c),c})}update(e){return Object.assign(this,e),this.update$(),this}update$(){this.name$.set(this.name),this.post_upload_count$.set(this.post_upload_count),this.level$.set(this.level),this.level_string$.set(this.level_string)}get booruURL(){return`${this.booru.origin}/users/${this.id}`}get url(){return`/users/${this.id}`}}h(z,"manager",new Map);class nt extends z{constructor(t,s,i){super(t,i,!1);h(this,"apiKey");h(this,"favorite_count$",$.state(0));h(this,"forum_post_count$",$.state(0));this.apiKey=s,this.update$()}update$(){var t,s;super.update$(),(t=this.forum_post_count$)==null||t.set(this.forum_post_count),(s=this.favorite_count$)==null||s.set(this.favorite_count)}static get storageUserData(){const t=localStorage.getItem("user_data");return t?JSON.parse(t):null}static set storageUserData(t){localStorage.setItem("user_data",JSON.stringify(t))}}const k=class k{constructor(e){h(this,"user");h(this,"posts",new Map);h(this,"tags",new Map);Object.assign(this,e),this.origin.endsWith("/")&&(this.origin=this.origin.slice(0,-1)),k.manager.set(this.name,this)}static set(e){this.used=e,this.name$.set(e.name),this.storageAPI=e.name;const t=nt.storageUserData;return t&&e.login(t.username,t.apiKey),this.events.fire("set"),this}static get storageAPI(){return localStorage.getItem("booru_api")}static set storageAPI(e){e?localStorage.setItem("booru_api",e):localStorage.removeItem("booru_api")}async fetch(e){const t=await fetch(`${this.origin}${e}`).then(s=>s.json());if(t.success===!1)throw t.message;return t}async login(e,t){const s=await this.fetch(`/profile.json?login=${e}&api_key=${t}`);return this.user=new nt(this,t,s),k.events.fire("login",this.user),this.user}logout(){return this.user=void 0,nt.storageUserData=null,k.events.fire("logout"),this}};h(k,"used"),h(k,"events",new st),h(k,"name$",$.state(k.name)),h(k,"manager",new Map);let y=k;class Jt{constructor(e,t){h(this,"post_count$",$.state(0));h(this,"name$",$.state(""));h(this,"booru");this.booru=e,Object.assign(this,t),this.$update()}static async fetch(e,t){var r;const s=await fetch(`${e.origin}/tags/${t}.json`).then(async a=>await a.json()),i=((r=e.tags.get(s.id))==null?void 0:r.update(s))??new this(e,s);return e.tags.set(i.id,i),i}static async fetchMultiple(e,t,s=1e3){let i="";if(t)for(const[u,c]of Object.entries(t))if(c instanceof Array)i+=`&search[${u}]=${c}`;else if(c instanceof Object)for(const[d,m]of Object.entries(c))i+=`&search[${u}${d}]=${m}`;else i+=`&search[${u}]=${c}`;return(await(await fetch(`${e.origin}/tags.json?limit=${s}${i}`)).json()).map(u=>{var d;const c=((d=e.tags.get(u.id))==null?void 0:d.update(u))??new this(e,u);return e.tags.set(c.id,c),c})}update(e){return Object.assign(this,e),this.$update(),this}$update(){this.post_count$.set(this.post_count),this.name$.set(this.name)}}var W=(n=>(n[n.General=0]="General",n[n.Artist=1]="Artist",n[n.Copyright=3]="Copyright",n[n.Character=4]="Character",n[n.Meta=5]="Meta",n))(W||{});const dt=1e3,rt=dt*60,ot=rt*60,at=ot*24,Yt=at*7,it=new Intl.RelativeTimeFormat("en",{style:"long"});function Qt(n){n=Math.floor(n);const e=n/dt,t=n/rt,s=n/ot,i=n/at,r=n%1e3,a=Math.floor(n%6e4/1e3),o=Math.floor(n%36e5/6e4),u=Math.floor(n%(36e5*24)/36e5),c=a.toString().padStart(2,"0"),d=o.toString().padStart(2,"0"),m=u.toString().padStart(2,"0");return{seconds:e,minutes:t,hours:s,days:i,mil:r,s:a,min:o,h:u,ss:c,mm:d,hh:m}}function Zt(n,e=Date.now()){const t=n-e,s=Math.abs(t);if(sawait s.json());return this.update(t),z.fetchMultiple(this.booru,{id:[this.uploader_id,this.approver_id].detype(null)}).then(()=>this.update$()),this}static async fetchMultiple(t,s,i=20){let r="";if(s){if(typeof s=="string")r=s;else for(const[d,m]of Object.entries(s))if(m!==void 0){if(d==="tags"){r+=`${m}`;continue}r.at(-1)!=="="&&(r+=" "),r+=`${d}:${m}`}}const o=await(await fetch(`${t.origin}/posts.json?limit=${i}&tags=${r}&_method=get`)).json();if(!(o instanceof Array))return[];const u=o.map(d=>{var b;const m=((b=t.posts.get(d.id))==null?void 0:b.update(d))??new this(t,d.id,d);return t.posts.set(m.id,m),m});if(!u.length)return u;const c=[...new Set(o.map(d=>[d.approver_id,d.uploader_id].detype(null)).flat())];return z.fetchMultiple(t,{id:c}).then(()=>u.forEach(d=>d.update$())),u}update$(){var t,s,i,r;this.uploader$.set(((t=this.uploader)==null?void 0:t.name$)??((s=this.uploader_id)==null?void 0:s.toString())),this.approver$.set(((i=this.approver)==null?void 0:i.name$)??((r=this.approver_id)==null?void 0:r.toString())??"None"),this.created_date$.set(Zt(+new Date(this.created_at))),this.favorites$.set(this.fav_count),this.score$.set(this.score),this.file_size$.set(te(this.file_size)),this.file_ext$.set(this.file_ext),this.file_url$.set(this.file_url),this.source$.set(this.source),this.dimension$.set(`${this.image_width}x${this.image_height}`),this.url$.set(`${this.url}`),this.isUgoria&&this.webm_url$.set(this.large_file_url),this.createdDate=new Date(this.created_at),this.fire("update")}update(t){return Object.assign(this,t),this.update$(),this}async fetchTags(){return await this.ready,await Jt.fetchMultiple(this.booru,{name:{_space:this.tag_string}})}get pathname(){return`/posts/${this.id}`}get uploader(){return z.manager.get(this.uploader_id)}get approver(){return this.approver_id?z.manager.get(this.approver_id):null}get isVideo(){return this.file_ext==="mp4"||this.file_ext==="webm"||this.file_ext==="zip"}get isGif(){return this.file_ext==="gif"}get isUgoria(){return this.file_ext==="zip"}get hasSound(){return this.tag_string_meta.includes("sound")}get tags(){const t=this.tag_string.split(" ");return[...this.booru.tags.values()].filter(s=>t.includes(s.name))}get previewURL(){var t,s;return((s=(t=this.media_asset.variants)==null?void 0:t.find(i=>i.file_ext==="webp"))==null?void 0:s.url)??this.large_file_url}get url(){return`${this.booru.origin}/posts/${this.id}`}get isFileSource(){return this.source.startsWith("file://")}}class Lt{constructor(e){Object.assign(this,e)}static async fetch(e,t){const s=await fetch(`${e.origin}/artist_commentaries/${t}.json`);return new this(await s.json())}static async fetchMultiple(e,t,s=200){let i="";if(t)for(const[u,c]of Object.entries(t))if(c instanceof Array)i+=`&search[${u}]=${c}`;else if(c instanceof Object)for(const[d,m]of Object.entries(c))i+=`&search[${u}${d}]=${m}`;else i+=`&search[${u}]=${c}`;return(await(await fetch(`${e.origin}/artist_commentaries.json?limit=${s}${i}`)).json()).map(u=>{const c=new this(u);return this.manager.set(c.id,c),c})}}h(Lt,"manager",new Map);const ee=new Intl.NumberFormat("en",{notation:"compact"});function Y(n){return ee.format(n)}const se=$("route").path("/posts/:id").id("post").builder(({$route:n,params:e})=>{if(!Number(e.id))return $("h1").content("404: POST NOT FOUND");const t=tt.get(y.used,+e.id);return[$("div").class("viewer").content(async()=>(await t.ready,t.isVideo?$("video").height(t.image_height).width(t.image_width).src(t.file_ext==="zip"?t.large_file_url:t.file_url).controls(!0).autoplay(!0).loop(!0).disablePictureInPicture(!0):$("img").src(t.large_file_url))),$("div").class("content").content([$("h3").content("Artist's Commentary"),$("section").class("commentary").content(async s=>{const i=(await Lt.fetchMultiple(y.used,{post:{_id:t.id}})).at(0);return[i?[i.original_title?$("h3").content(i.original_title):null,$("pre").content(i.original_description)]:"No commentary"]})]),$("div").class("sidebar").self(s=>{let i=0;addEventListener("scroll",()=>{s.inDOM()&&(i=document.documentElement.scrollTop)},{passive:!0}),n.on("beforeShift",()=>{innerWidth>800&&s.css({position:"absolute",top:`calc(${i}px + var(--nav-height) + var(--padding))`})}).on("afterShift",()=>s.css({position:"",top:""}))}).content([$("section").class("post-info").content([new E("id").name("Post").content(`#${e.id}`),new E("uploader").name("Uploader").content(t.uploader$),new E("approver").name("Approver").content(t.approver$),new E("date").name("Date").content(t.created_date$),new E("size").name("Size").content([t.file_size$,t.dimension$]),new E("file-type").name("File Type").content(t.file_ext$),$("div").class("inline").content([new E("favorites").name("Favorites").content(t.favorites$),new E("score").name("Score").content(t.score$)]),new E("file-url").name("File").content([$("a").href(t.file_url$).content(t.file_url$.convert(s=>s.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(s,i)=>ht(i,t.source))]),new E("source-url").name("Source").content([$("a").href(t.source$).content(t.source$.convert(s=>s.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(s,i)=>ht(i,t.source))]),new E("booru-url").name(y.name$).content([$("a").href(t.url$).content(t.url$.convert(s=>s.replace("https://",""))).target("_blank"),$("ion-icon").name("clipboard").on("click",(s,i)=>ht(i,t.source))]),new E("booru-url").name("Webm").hide(!0).self(async s=>{await t.ready,t.isUgoria&&s.content($("a").href(t.webm_url$).content(t.webm_url$.convert(i=>i.replace("https://",""))).target("_blank")).hide(!1)})]),$("div").class("post-tags").content(async s=>{const i=await t.fetchTags(),[r,a,o,u,c]=[i.filter(m=>m.category===W.Artist),i.filter(m=>m.category===W.Character),i.filter(m=>m.category===W.General),i.filter(m=>m.category===W.Meta),i.filter(m=>m.category===W.Copyright)];return[d("Artist",r),d("Character",a),d("Copyright",c),d("Meta",u),d("General",o)];function d(m,b){return b.length?[$("h3").content(m),$("section").content([b.map(l=>$("div").class("tag").content([$("a").class("tag-name").content(l.name).href(`/posts?tags=${l.name}`),$("span").class("tag-post-count").content(l.post_count$.convert(Y))]))])]:null}})])]});function ht(n,e){n.name("checkmark"),navigator.clipboard.writeText(e),setTimeout(()=>n.name("clipboard"),3e3)}class E extends f{constructor(t){super("div");h(this,"$name",$("span").class("property-name"));h(this,"$values",$("div").class("property-values"));this.staticClass("property").attribute("property-id",t),super.content([this.$name,this.$values.hide(!0)])}name(t){return this.$name.content(t),this}content(t){this.$values.hide(!1);const s=$.orArrayResolve(t);return this.$values.content(s.map(i=>$("span").staticClass("property-value").content(i))),this}}class ie extends f{constructor(t){super("post-tile");h(this,"post");h(this,"$video");h(this,"duration$",$.state(""));this.post=t,this.$video=this.post.isVideo?$("video").width(this.post.image_width).height(this.post.image_height).disablePictureInPicture(!0).loop(!0).muted(!0).hide(!0).on("mousedown",s=>s.preventDefault()):null,this.attribute("filetype",this.post.file_ext),this.durationUpdate(),this.build()}build(){var s,i;let t;(s=this.$video)==null||s.on("playing",(r,a)=>{t=setInterval(()=>{this.durationUpdate()},500)}),(i=this.$video)==null||i.on("pause",()=>{clearInterval(t),this.durationUpdate()}),this.class("loading").content([this.post.isVideo?$("div").class("video-detail").content([this.post.hasSound?$("ion-icon").name("volume-medium-outline"):null,this.post.isUgoria?$("ion-icon").name("images-outline"):null,$("span").class("duration").content(this.duration$)]):null,this.post.isGif?$("div").class("gif-detail").content([$("span").content("GIF")]):null,$("a").href(this.post.pathname).content(()=>[this.$video,$("img").draggable(!1).css({opacity:"0"}).width(this.post.image_width).height(this.post.image_height).src(this.post.previewURL).loading("lazy").on("mousedown",r=>r.preventDefault()).once("load",(r,a)=>{a.src(this.post.previewURL).on(["mouseenter","touchstart"],()=>{this.post.isGif&&a.src(this.post.large_file_url)},{passive:!0}).on(["mouseleave","touchend","touchcancel"],()=>{this.post.isGif&&a.src(this.post.previewURL)},{passive:!0}).animate({opacity:[0,1]},{duration:300,fill:"both"}),this.removeClass("loading")})]).on(["mouseenter","touchstart"],()=>{var r,a;(r=this.$video)!=null&&r.isPlaying||(a=this.$video)==null||a.src(this.post.large_file_url).hide(!1).play().catch(o=>{})},{passive:!0}).on(["mouseleave","touchend","touchcancel"],()=>{var r;(r=this.$video)==null||r.pause().currentTime(0).hide(!0)},{passive:!0})])}durationUpdate(){if(!this.$video)return;const t=Qt(this.post.media_asset.duration*1e3-this.$video.currentTime()*1e3);this.duration$.set(Number(t.hh)>0?`${t.hh}:${t.mm}:${t.ss}`:`${t.mm}:${t.ss}`)}}class vt extends xt{constructor(t){super();h(this,"posts",new Set);h(this,"$posts",new Set);h(this,"tags");h(this,"finished",!1);this.tags=t==null?void 0:t.tags,this.addStaticClass("post-grid"),this.type("waterfall").gap(10),this.init()}async init(){setInterval(()=>{this.inDOM()&&document.documentElement.scrollTop===0&&this.updateNewest()},1e4),y.events.on("set",()=>{this.removeAll(),this.finished&&(this.finished=!1,this.loader())}),this.on("resize",()=>this.resize()),this.loader()}async loader(){if(!this.inDOM())return setTimeout(()=>this.loader(),100);for(;this.inDOM()&&document.documentElement.scrollHeight<=innerHeight*2;)if(!(await this.getPosts()).length)return this.finished=!0;if(document.documentElement.scrollTop+innerHeight>document.documentElement.scrollHeight-innerHeight*2&&!(await this.getPosts()).length)return this.finished=!0;setTimeout(()=>this.loader(),100)}resize(){const t=Math.round(this.dom.clientWidth/300);this.column(t>=2?t:2)}addPost(t){t=$.orArrayResolve(t);for(const i of t){if(!i.file_url||this.posts.has(i))continue;const r=new ie(i);this.$posts.add(r),this.posts.add(i)}const s=[...this.$posts.values()].sort((i,r)=>+r.post.createdDate-+i.post.createdDate);return this.content(s).render(),this}removeAll(){return this.posts.clear(),this.$posts.clear(),this.animate({opacity:[1,0]},{duration:300,easing:"ease"},()=>this.clear().render()),this}async updateNewest(){const t=this.sortedPosts.at(0),s=await tt.fetchMultiple(y.used,{tags:this.tags,id:t?`>${t.id}`:void 0},100);return this.addPost(s),s}async getPosts(){const t=this.sortedPosts.at(-1),s=await tt.fetchMultiple(y.used,{tags:this.tags,id:t?`<${t.id}`:void 0},100);return this.addPost(s),s}get sortedPosts(){return this.posts.array.sort((t,s)=>+s.createdDate-+t.createdDate)}}class ne{static async fetch(e,t,s=20){return(await fetch(`${e.origin}/autocomplete.json?search[query]=${t}&search[type]=tag_query&version=1&limit=${s}`).then(r=>r.json())).map(r=>new re(r))}}class re{constructor(e){Object.assign(this,e)}isTag(){return this.type==="tag"||this.type==="tag-autocorrect"||this.type==="tag-alias"||this.type==="tag-word"}isTagAutocorrect(){return this.type==="tag-autocorrect"}isTagAntecedent(){return!!this.antecedent}isTagWord(){return this.type==="tag-word"}isUser(){return this.type==="user"}}class oe extends f{constructor(){super("searchbar");h(this,"$tagInput",new ce(this));h(this,"$selectionList",new ae);h(this,"typingTimer",null);h(this,"$filter",$("div").class("filter"));this.build(),window.addEventListener("keyup",t=>{!this.inDOM()&&t.key==="/"&&this.activate(),this.inDOM()&&t.key==="Escape"&&this.inactivate()})}build(){this.content([$("div").class("input-container").content([this.$tagInput.on("input",()=>this.inputHandler()).on("keydown",t=>this.keyHandler(t)),$("ion-icon").name("close-circle-outline").title("Clear Input").on("click",()=>this.$tagInput.clearAll())]).on("click",t=>{t.target===this.$tagInput.dom&&this.$tagInput.addTag().input()}),$("div").class("selection-list-container").content([this.$selectionList]),this.$filter.on("click",()=>{location.hash==="#search"&&$.back()})])}activate(){return this.hide(!1),this.$filter.animate({opacity:[0,.5]},{duration:300,easing:"ease"}),this.$tagInput.input(),this}inactivate(){return this.animate({opacity:[.5,0]},{duration:300,easing:"ease"},()=>this.hide(!0)),this}keyHandler(t){var r,a;const s=()=>{t.preventDefault(),this.$tagInput.addTag().input()},i=o=>{const u=this.$tagInput.children.indexOf(this.$tagInput.$inputor),c=this.$tagInput.children.array.at(u+1);this.$tagInput.addTag(o.value()),c?this.$tagInput.editTag(c):this.$tagInput.input()};switch(t.key){case"ArrowUp":{t.preventDefault(),this.$selectionList.focusPrevSelection(),this.$tagInput.value((r=this.$selectionList.focused)==null?void 0:r.value());break}case"ArrowDown":{t.preventDefault(),this.$selectionList.focusNextSelection(),this.$tagInput.value((a=this.$selectionList.focused)==null?void 0:a.value());break}case" ":s();break;case"Enter":{t.preventDefault(),this.$selectionList.focused?i(this.$selectionList.focused):(this.$tagInput.addTag(),this.search());break}case"Tab":{t.preventDefault();const o=this.$tagInput.children.indexOf(this.$tagInput.$inputor);if(t.shiftKey){this.$tagInput.editTag(this.$tagInput.children.array.at(o-1));break}if(this.$selectionList.focused)i(this.$selectionList.focused);else{const u=this.$tagInput.children.array.at(o+1);u?this.$tagInput.editTag(u):this.$tagInput.addTag().input()}break}case"Backspace":{const o=this.$tagInput.children.indexOf(this.$tagInput.$inputor);o!==0&&!this.$tagInput.$input.value().length&&(t.preventDefault(),this.$tagInput.editTag(this.$tagInput.children.array.at(o-1)));break}}}inputHandler(){this.typingTimer&&(clearTimeout(this.typingTimer),this.typingTimer=null),this.typingTimer=setTimeout(async()=>{this.typingTimer=null,this.getSearchSuggestions()},200)}async getSearchSuggestions(){const t=this.$tagInput.$input.value();if(!t.length)return this.$selectionList.clearSelections();const s=await ne.fetch(y.used,t,20);this.$selectionList.clearSelections().addSelections(s.map(i=>new he().value(i.value).content([$("div").class("selection-label").content([i.isTagAntecedent()?$("span").class("tag-antecedent").self(r=>r.dom.innerHTML=i.antecedent.replaceAll(t,`${t}`)):null,$("div").class("label-container").content([i.isTagAntecedent()?$("ion-icon").name("arrow-forward-outline"):null,$("span").class("label").self(r=>r.dom.innerHTML=i.label.replaceAll(t,`${t}`))])]),i.isTag()?$("div").class("tag-detail").content([$("span").class("tag-post-count").content(Y(i.post_count)),$("span").class("tag-category").content(W[i.category])]):null,i.isUser()?$("span").class("user-level").content(i.level):null]).on("click",()=>{this.$tagInput.addTag(i.label).input()}))),this.$tagInput.$input.value().length||this.$selectionList.clearSelections()}search(){return $.replace(`/posts?tags=${this.$tagInput.query.replace(":","%3A")}`),this.$tagInput.clearAll(),this.inactivate(),this}checkURL(t,s){(t==null?void 0:t.hash)==="#search"&&this.inactivate(),s.hash==="#search"&&this.activate()}}class ae extends f{constructor(){super("selection-list");h(this,"focused",null);h(this,"selections",new Set)}addSelections(t){t=$.orArrayResolve(t);for(const s of t)this.selections.add(s);return this.insert(t),this}clearSelections(){return this.focused=null,this.selections.clear(),this.clear(),this}focusSelection(t){return this.blurSelection(),this.focused=t,t.focus(),t.offsetTopthis.scrollTop()+this.offsetHeight&&this.scrollTop(t.offsetTop+t.offsetHeight-this.offsetHeight),this}blurSelection(){var t;return(t=this.focused)==null||t.blur(),this.focused=null,this}focusNextSelection(){const t=this.selections.array,s=t.at(0);if(this.focused){const i=t.at(t.indexOf(this.focused)+1);i?this.focusSelection(i):s&&this.focusSelection(s)}else s&&this.focusSelection(s)}focusPrevSelection(){const t=this.selections.array;if(this.focused){const s=t.at(t.indexOf(this.focused)-1);s&&this.focusSelection(s)}else{const s=t.at(0);s&&this.focusSelection(s)}}}class he extends f{constructor(){super("selection");h(this,"property",{value:""})}value(t){return $.fluent(this,arguments,()=>this.property.value,()=>$.set(this.property,"value",t))}focus(){return this.addClass("active"),this}blur(){return this.removeClass("active"),this}}class ce extends f{constructor(t){super("tag-input");h(this,"$input",$("input").type("text"));h(this,"$sizer",$("span").class("sizer"));h(this,"$inputor",$("div").class("input-wrapper").content([this.$sizer,this.$input.on("input",()=>{this.$sizer.content(this.$input.value())})]));h(this,"tags",new Set);h(this,"$seachbar");this.$seachbar=t}input(){return this.insert(this.$inputor),this.$input.focus(),this.$input.value()?this.$seachbar.getSearchSuggestions():this.$seachbar.$selectionList.clearSelections(),this}addTag(t){if(t=t??this.$input.value(),!t.length)return this;const s=new ue(t);return s.on("click",()=>this.editTag(s)),this.tags.add(s),this.value(""),this.$inputor.replace(s),this}editTag(t){return this.addTag(),this.tags.delete(t),t.replace(this.$inputor),this.value(t.name),this.$input.focus(),this.$seachbar.getSearchSuggestions(),this}clearAll(){return this.value(""),this.tags.clear(),this.clear(),this}value(t){return t===void 0?this:(this.$input.value(t),this.$sizer.content(t),this)}get query(){return this.tags.array.map(t=>t.name).toString().replace(",","+")}}class ue extends f{constructor(t){super("tag");h(this,"name");this.name=t,this.build()}build(){this.content(this.name)}}class le extends f{constructor(){super("ion-icon")}name(e){return this.attribute("name",e),this}size(e){return this.attribute("size",e),this}}class de extends lt{constructor(){super();h(this,"$icon",$("ion-icon"));h(this,"$label",$("span"));this.addStaticClass("icon"),this.build()}build(){super.content([this.$icon.hide(!0),this.$label])}content(t){return this.$label.content(t),this}icon(t){return this.$icon.name(t).hide(!1),this}link(t,s=!1){return this.on("click",()=>s?$.replace(t):$.open(t)),this}}const me=$("route").id("login").path("/login").builder(()=>{const[n,e]=[$.state(""),$.state("")];return[$("div").class("login-container").content([$("h1").content("Login"),$("div").class("username","input-container").content([$("label").for("username").content("Username"),$("input").type("text").id("username").value(n)]),$("div").class("api-key","input-container").content([$("label").for("api-key").content("API Key"),$("input").type("password").id("api-key").value(e)]),$("icon-button").content("Login").on("click",async()=>{await y.used.login(n.value,e.value),y.used.user&&(nt.storageUserData={apiKey:e.value,username:n.value},n.set(""),e.set(""),$.replace("/"))}),$("icon-button").content("Create Account").icon("open-outline").on("click",()=>$.open("https://danbooru.donmai.us/users/new","_blank"))])]});class fe extends f{constructor(){super("drawer");h(this,"$filter",$("div").class("filter"));h(this,"$container",$("div").class("drawer-container"));this.hide(!0),this.build()}build(){this.content([this.$container.content([$("div").class("user-info").hide(!0).self(t=>[y.events.on("login",s=>{t.content([$("div").content([$("h3").class("username").content(s.name$),$("div").class("user-detail").content([$("span").class("userid").content(`ID: ${s.id}`),$("span").class("level").content(["Level: ",s.level_string$])])]),$("div").class("user-nav").content([$("icon-button").title("Uploaded Posts").icon("image").content(s.post_upload_count$.convert(Y)).link(`/posts?tags=user:${s.name}`,!0),$("icon-button").title("Favorites").icon("heart").content(s.favorite_count$.convert(Y)).link(`/posts?tags=ordfav:${s.name}`,!0),$("icon-button").title("Forum Posts").icon("document-text").content(s.forum_post_count$.convert(Y)).hide(!0)])]).hide(!1)}).on("logout",()=>{t.clear().hide(!0)})]),$("div").class("nav").content([$("div").class("login").content([$("icon-button").icon("log-in-outline").content("Login").link("/login",!0)]).self(t=>y.events.on("login",()=>t.hide(!0)).on("logout",()=>t.hide(!1))),$("div").class("logout").hide(!0).content([$("icon-button").icon("log-in-outline").content("Logout").on("dblclick",()=>y.used.logout())]).self(t=>y.events.on("login",()=>t.hide(!1)).on("logout",()=>t.hide(!0)))])]),this.$filter.on("click",()=>$.back())])}open(){this.hide(!1),this.$container.animate({transform:["translateX(100%)","translateX(0%)"]},{fill:"both",duration:300,easing:"ease"}),this.$filter.animate({opacity:[0,1]},{fill:"both",duration:300,easing:"ease"})}close(){this.$container.animate({transform:["translateX(0%)","translateX(100%)"]},{fill:"both",duration:300,easing:"ease"},()=>this.hide(!0)),this.$filter.animate({opacity:[1,0]},{fill:"both",duration:300,easing:"ease"})}checkURL(t,s){(t==null?void 0:t.hash)==="#drawer"&&this.close(),s.hash==="#drawer"&&this.open()}}$.registerTagName("ion-icon",le);$.registerTagName("icon-button",de);$.anchorHandler=n=>{$.open(n.href(),n.target())};const[ut,pe]=[new y({origin:"https://danbooru.donmai.us",name:"Danbooru"}),new y({origin:"https://safebooru.donmai.us",name:"Safebooru"}),new y({origin:"https://testbooru.donmai.us",name:"Testbooru"})];y.set(y.manager.get(y.storageAPI??"")??ut);const At=new oe().hide(!0),Mt=new fe;$(document.body).content([$("nav").content([$("a").class("title").href("/").content([$("h1").class("booru-name").content(y.name$),$("h2").class("app").content([$("span").class("app-name").content("Viewer"),$("span").class("version").content("v0.3.5")])]),$("div").class("searchbar").content(["Search in ",y.name$]).self(n=>L.events.on("stateChange",({beforeURL:e,afterURL:t})=>{e.hash==="#search"&&n.hide(!1),t.hash==="#search"&&n.hide(!0)})).on("click",()=>$.open(location.href+"#search")),$("div").class("buttons").content([$("ion-icon").class("search").name("search-outline").title("Search").self(n=>L.events.on("stateChange",({beforeURL:e,afterURL:t})=>{e.hash==="#search"&&n.hide(!1),t.hash==="#search"&&n.hide(!0)})).on("click",()=>$.open(location.href+"#search")),$("ion-icon").class("switch").name("swap-horizontal").title("Switch Booru").on("click",()=>{y.used===ut?y.set(pe):y.set(ut)}),$("ion-icon").class("open").name("open-outline").title("Open in Original Site").on("click",()=>$.open(location.href.replace(location.origin,y.used.origin))),$("ion-icon").class("menu").name("menu-outline").title("Menu").hide(!1).self(n=>{y.events.on("login",()=>n.hide(!0)).on("logout",()=>n.hide(!1))}).on("click",()=>$.open(location.href+"#drawer")),$("div").class("account").hide(!0).title("Menu").self(n=>{y.events.on("login",e=>{n.content(e.name$.convert(t=>{var s;return((s=t.at(0))==null?void 0:s.toUpperCase())??""})).hide(!1)}).on("logout",()=>n.hide(!0))}).on("click",()=>$.open(location.href+"#drawer"))])]),At,Mt,$("router").base("/").map([$("route").id("posts").path("/").builder(()=>new vt),$("route").id("posts").path("/posts?tags").builder(({query:n})=>new vt({tags:n.tags})),se,me]).on("beforeSwitch",n=>{n.preventDefault();function s(){var a;const r=$.call(()=>{switch(L.navigationDirection){case F.Forward:return["translateX(2%)","translateX(0%)"];case F.Back:return["translateX(-2%)","translateX(0%)"];case F.Replace:return""}});n.$view.content(n.nextContent),n.rendered(),(a=n.nextContent.element)==null||a.class("animated").animate({opacity:[0,1],transform:r},{duration:300,easing:"ease"},()=>{var o;n.switched(),(o=n.nextContent.element)==null||o.removeClass("animated")})}function i(){var a,o;const r=$.call(()=>{switch(L.navigationDirection){case F.Forward:return["translateX(0%)","translateX(-2%)"];case F.Back:return["translateX(0%)","translateX(2%)"];case F.Replace:return""}});(o=(a=n.previousContent)==null?void 0:a.element)==null||o.class("animated").animate({opacity:[1,0],transform:r},{duration:300,easing:"ease"},()=>{var u,c;(c=(u=n.previousContent)==null?void 0:u.element)==null||c.removeClass("animated"),s()})}n.previousContent?i():s()})]);L.events.on("stateChange",({beforeURL:n,afterURL:e})=>Pt(n,e));Pt(void 0,new URL(location.href));function Pt(n,e){At.checkURL(n,e),Mt.checkURL(n,e)} diff --git a/dist/index.html b/dist/index.html index 27e48af..7f26691 100644 --- a/dist/index.html +++ b/dist/index.html @@ -7,8 +7,8 @@ Danbooru Viewer v0.2.5 - - + + diff --git a/index.scss b/index.scss index a1f7af1..404ed06 100644 --- a/index.scss +++ b/index.scss @@ -9,17 +9,19 @@ @import '/src/route/login/$login_route'; :root { - --background-color: #1e1e2c; - --background-color-lighter: #3b3b66; - --background-color-light: #24243b; - --background-color-dark: #12121f; - --background-color-darker: #07070c; --primary-color: #d1d1ee; --primary-color-dark: #9696b3; --primary-color-darker: #72728d; - --secondary-color: #aeaeec; - --secondary-color-dark: #6d6da1; - --secondary-color-darker: #424268; + --secondary-color-9: #aeaeec; + --secondary-color-8: #9a9ad6; + --secondary-color-7: #7c7cb8; + --secondary-color-6: #646497; + --secondary-color-5: #545486; + --secondary-color-4: #424268; + --secondary-color-3: #3b3b66; + --secondary-color-2: #24243b; + --secondary-color-1: #1e1e2c; // background color + --secondary-color-0: #07070c; --shadow-color: #09090e50; --border-radius-small: 0.4rem; @@ -32,7 +34,7 @@ html { font-size: 14px; ::-webkit-scrollbar { - background-color: var(--background-color); + background-color: var(--secondary-color-1); width: 8px; } @@ -43,7 +45,7 @@ html { } body { overflow-x: hidden; - background-color: var(--background-color); + background-color: var(--secondary-color-1); color: var(--primary-color); margin: 0; font-family: Microsoft Yahei; @@ -56,7 +58,7 @@ nav { position: fixed; top: 0; z-index: 100; - background-color: color-mix(in srgb, var(--background-color) 70%, transparent); + background-color: color-mix(in srgb, var(--secondary-color-1) 70%, transparent); justify-content: space-between; align-items: center; padding-inline: 1rem; @@ -69,7 +71,7 @@ nav { gap: 0.4rem; text-decoration: none; .booru-name { - color: var(--secondary-color); + color: var(--secondary-color-9); margin: 0; } @@ -77,13 +79,13 @@ nav { display: flex; align-items: center; border-radius: var(--border-radius-small); - // border: 1px solid var(--secondary-color); + // border: 1px solid var(--secondary-color-9); // padding: 0.2rem 0.4rem; margin: 0; gap: 0.4rem; .version { - color: var(--background-color); - background-color: var(--secondary-color); + color: var(--secondary-color-1); + background-color: var(--secondary-color-9); padding: 0.2em 0.4em; border-radius: var(--border-radius-small); font-size: 0.8rem; @@ -92,14 +94,14 @@ nav { .app-name { display: none; font-size: 1rem; - color: var(--secondary-color); + color: var(--secondary-color-9); } } } div.searchbar { padding: 0.4rem 10%; max-width: 500px; - background-color: color-mix(in srgb, var(--background-color-light) 30%, transparent); + background-color: color-mix(in srgb, var(--secondary-color-2) 30%, transparent); border: 1px solid var(--primary-color-darker); border-radius: var(--border-radius-small); color: var(--primary-color-dark); @@ -114,12 +116,12 @@ nav { align-items: center; gap: 1rem; ion-icon { - // background-color: var(--background-color); + // background-color: var(--secondary-color-1); transition: all 0.3s ease; border-radius: 1rem; padding: 0.4rem; &:hover { - background-color: color-mix(in srgb, var(--background-color-lighter) 50%, transparent); + background-color: color-mix(in srgb, var(--secondary-color-3) 50%, transparent); } } ion-icon.search { @@ -134,8 +136,8 @@ nav { align-items: center; border-radius: 2rem; font-weight: bolder; - color: var(--secondary-color); - background-color: var(--secondary-color-darker); + color: var(--secondary-color-9); + background-color: var(--secondary-color-4); user-select: none; cursor: pointer; } @@ -163,16 +165,26 @@ router { } } +route#posts { + + header { + margin-bottom: 1rem; + h2 { + margin: 0; + } + } +} + button { - background-color: var(--secondary-color-darker); - color: var(--secondary-color); + background-color: var(--secondary-color-4); + color: var(--secondary-color-9); padding: 0.8rem 1.2rem; border-radius: 1rem; border: none; cursor: pointer; &:hover { - background-color: var(--secondary-color-dark); + background-color: var(--secondary-color-6); color: var(--primary-color); } } @@ -183,24 +195,24 @@ ion-icon { cursor: pointer; &:hover { - color: var(--secondary-color); + color: var(--secondary-color-9); } } a { - color: var(--secondary-color); text-decoration: none; + color: var(--secondary-color-9); } input { - background-color: var(--background-color-light); + background-color: var(--secondary-color-2); border-radius: var(--border-radius-small); - border: 1px solid var(--background-color-lighter); + border: 1px solid var(--secondary-color-3); font-size: 0.9rem; padding: 0.8rem 1.2rem; color: var(--primary-color); outline: none; &:focus { - border-color: var(--secondary-color); + border-color: var(--secondary-color-9); } } \ No newline at end of file diff --git a/package.json b/package.json index e69f6ee..26aa4c5 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "danbooru-viewer", "module": "index.ts", "type": "module", - "version": "0.3.5", + "version": "0.4.0", "devDependencies": { "@types/bun": "latest", "vite": "^5.4.8" diff --git a/src/component/Drawer/_$Drawer.scss b/src/component/Drawer/_$Drawer.scss index 73c18ac..d19d095 100644 --- a/src/component/Drawer/_$Drawer.scss +++ b/src/component/Drawer/_$Drawer.scss @@ -15,18 +15,18 @@ drawer { width: 300px; max-width: 70%; height: 100%; - background-color: var(--background-color); + background-color: var(--secondary-color-1); border-radius: var(--border-radius-large); z-index: 1; overflow: hidden; div.user-info { - background-color: var(--background-color-light); + background-color: var(--secondary-color-2); padding: 2rem; .username { margin: 0; - color: var(--secondary-color); + color: var(--secondary-color-9); cursor: pointer; } @@ -68,8 +68,8 @@ drawer { height: 100%; width: 100%; background: linear-gradient(90deg, - color-mix(in srgb, var(--background-color-dark) 50%, transparent) 0%, - color-mix(in srgb, var(--background-color-darker) 70%, transparent) 100% + color-mix(in srgb, var(--secondary-color-1) 50%, transparent) 0%, + color-mix(in srgb, var(--secondary-color-0) 70%, transparent) 100% ); } } \ No newline at end of file diff --git a/src/component/PostGrid/$PostGrid.ts b/src/component/PostGrid/$PostGrid.ts index 327fbd3..933e46d 100644 --- a/src/component/PostGrid/$PostGrid.ts +++ b/src/component/PostGrid/$PostGrid.ts @@ -1,4 +1,4 @@ -import { $Layout } from "@elexis/layout"; +import { $Layout, type $LayoutEventMap } from "@elexis/layout"; import { Booru } from "../../structure/Booru"; import { Post } from "../../structure/Post"; import { $PostTile } from "../PostTile/$PostTile"; @@ -6,7 +6,7 @@ import { $PostTile } from "../PostTile/$PostTile"; interface $PostGridOptions { tags?: string } -export class $PostGrid extends $Layout { +export class $PostGrid extends $Layout<$PostGridEventMap> { posts = new Set(); $posts = new Set<$PostTile>(); tags?: string; @@ -25,10 +25,12 @@ export class $PostGrid extends $Layout { this.removeAll(); if (this.finished) { this.finished = false; + this.events.fire('startLoad'); this.loader(); } }) this.on('resize', () => this.resize()) + this.events.fire('startLoad'); this.loader(); } @@ -36,11 +38,19 @@ export class $PostGrid extends $Layout { if (!this.inDOM()) return setTimeout(() => this.loader(), 100);; while (this.inDOM() && document.documentElement.scrollHeight <= innerHeight * 2) { const posts = await this.getPosts(); - if (!posts.length) return this.finished = true; + if (!posts.length) { + this.finished = true; + if (!this.posts.size) this.events.fire('noPost'); + return + } } if (document.documentElement.scrollTop + innerHeight > document.documentElement.scrollHeight - innerHeight * 2) { const posts = await this.getPosts(); - if (!posts.length) return this.finished = true; + if (!posts.length) { + this.finished = true; + this.events.fire('endPost'); + return + } } setTimeout(() => this.loader(), 100); } @@ -87,4 +97,10 @@ export class $PostGrid extends $Layout { get sortedPosts() { return this.posts.array.sort((a, b) => +b.createdDate - +a.createdDate); } +} + +interface $PostGridEventMap extends $LayoutEventMap { + startLoad: []; + noPost: []; + endPost: []; } \ No newline at end of file diff --git a/src/component/PostTile/_$PostTile.scss b/src/component/PostTile/_$PostTile.scss index 6c61d0f..7fb5c3f 100644 --- a/src/component/PostTile/_$PostTile.scss +++ b/src/component/PostTile/_$PostTile.scss @@ -12,7 +12,7 @@ post-tile { &:hover { transform: scale(1.02); z-index: 1; - box-shadow: 0 0 10px color-mix(in srgb, var(--background-color) 50%, transparent) + box-shadow: 0 0 10px color-mix(in srgb, var(--secondary-color-1) 50%, transparent) } } @@ -25,7 +25,7 @@ post-tile { } div.video-detail, div.gif-detail { position: absolute; - background-color: var(--background-color-lighter);//color-mix(in srgb, var(--background-color-lighter) 80%, transparent); + background-color: var(--secondary-color-3);//color-mix(in srgb, var(--secondary-color-3) 80%, transparent); color: var(--primary-color); bottom: 0.3rem; right: 0.3rem; @@ -37,7 +37,7 @@ post-tile { align-items: center; gap: 0.2rem; z-index: 2; - // text-shadow: 0 0 0.5em var(--background-color); + // text-shadow: 0 0 0.5em var(--secondary-color-1); ion-icon { font-size: 1.4rem; @@ -53,17 +53,23 @@ post-tile { z-index: 2; } } - img { - height: 100%; - width: 100%; - vertical-align: top; - background-color: var(--background-color); - } - video { - height: 100%; - width: 100%; - object-fit: cover; - position: absolute; - z-index: 1; + + a { + background-color: transparent; + padding: 0; + border-radius: 0; + img { + height: 100%; + width: 100%; + vertical-align: top; + background-color: var(--secondary-color-1); + } + video { + height: 100%; + width: 100%; + object-fit: cover; + position: absolute; + z-index: 1; + } } } \ No newline at end of file diff --git a/src/component/Searchbar/_$Searchbar.scss b/src/component/Searchbar/_$Searchbar.scss index 828fdda..eca4c0e 100644 --- a/src/component/Searchbar/_$Searchbar.scss +++ b/src/component/Searchbar/_$Searchbar.scss @@ -10,7 +10,7 @@ searchbar { div.input-container { margin-top: 0.4rem; - background-color: color-mix(in srgb, var(--background-color-light) 100%, transparent); + background-color: color-mix(in srgb, var(--secondary-color-2) 100%, transparent); border-radius: var(--border-radius-small); font-size: 1rem; width: 500px; @@ -20,7 +20,7 @@ searchbar { z-index: 201; display: flex; align-items: center; - border: 1px solid var(--secondary-color-darker); + border: 1px solid var(--secondary-color-4); &:focus-within { outline: none; @@ -39,8 +39,8 @@ searchbar { tag { display: inline-block; padding: 0.2rem 0.4rem; - background-color: var(--secondary-color-darker); - color: var(--secondary-color); + background-color: var(--secondary-color-4); + color: var(--secondary-color-9); border-radius: var(--border-radius-small); cursor: pointer; } @@ -48,10 +48,10 @@ searchbar { ion-icon { font-size: 20px; - color: var(--secondary-color-darker); + color: var(--secondary-color-4); cursor: pointer; &:hover { - color: var(--secondary-color); + color: var(--secondary-color-9); } } } @@ -59,7 +59,7 @@ searchbar { div.selection-list-container { overflow: hidden; border-radius: var(--border-radius-small); - background-color: var(--background-color); + background-color: var(--secondary-color-1); z-index: 201; max-width: calc(100% - 2rem); width: 500px; @@ -84,10 +84,10 @@ searchbar { gap: 1rem; &:hover { - background-color: color-mix(in srgb, var(--background-color-lighter) 50%, transparent); + background-color: color-mix(in srgb, var(--secondary-color-3) 50%, transparent); } &.active { - background-color: var(--background-color-lighter); + background-color: var(--secondary-color-3); } div.selection-label { display: flex; @@ -116,8 +116,8 @@ searchbar { padding: 0.1rem 0.4rem; border-radius: var(--border-radius-small); font-size: 0.9rem; - background-color: var(--secondary-color-darker); - color: var(--secondary-color); + background-color: var(--secondary-color-4); + color: var(--secondary-color-9); } } @@ -125,7 +125,7 @@ searchbar { } div.filter { - background-color: var(--background-color); + background-color: var(--secondary-color-1); opacity: 0.5; position: fixed; top: 0; @@ -137,7 +137,7 @@ searchbar { .input-wrapper { color: var(--primary-color); - border: 1px solid var(--secondary-color); + border: 1px solid var(--secondary-color-9); border-radius: var(--border-radius-small); position: relative; box-sizing: border-box; diff --git a/src/main.ts b/src/main.ts index 38ae208..9b65fbf 100644 --- a/src/main.ts +++ b/src/main.ts @@ -84,9 +84,23 @@ $(document.body).content([ // Base Router $('router').base('/').map([ // Home Page - $('route').id('posts').path('/').builder(() => new $PostGrid()), + $('route').id('posts').path(['/', '/posts']).builder(() => new $PostGrid()), // Posts Page - $('route').id('posts').path('/posts?tags').builder(({query}) => new $PostGrid({tags: query.tags})), + $('route').id('posts').path('/posts?tags').builder(({query}) => { + const $postGrid = new $PostGrid({tags: query.tags}); + return [ + $('header').content([ + $('h2').content('Posts'), + $('div').class('tags').self($div => { + query.tags.split('+').forEach(tag => { + $div.insert($('a').class('tag').content(decodeURIComponent(tag)).href(`posts?tags=${tag}`)) + }) + }) + ]), + $('div').class('no-post').content('No Posts').hide(true).self($div => $postGrid.on('noPost', () => $div.hide(false)).on('startLoad', () => $div.hide(true))), + $postGrid + ] + }), // Post Page post_route, // Login Page diff --git a/src/route/login/_$login_route.scss b/src/route/login/_$login_route.scss index 50d2135..1b14a29 100644 --- a/src/route/login/_$login_route.scss +++ b/src/route/login/_$login_route.scss @@ -6,12 +6,16 @@ route#login { .login-container { padding: 2rem; - border: 1px solid var(--secondary-color); + border: 1px solid var(--secondary-color-9); border-radius: var(--border-radius-large); display: flex; flex-direction: column; justify-content: center; gap: 1rem; + max-width: 400px; + width: 100%; + box-sizing: border-box; + h1 { margin: 0; } @@ -20,7 +24,7 @@ route#login { flex-direction: column; gap: 0.5rem; input { - width: 300px; + display: block; } } } diff --git a/src/route/post/_$post_route.scss b/src/route/post/_$post_route.scss index f2f1a26..5880d80 100644 --- a/src/route/post/_$post_route.scss +++ b/src/route/post/_$post_route.scss @@ -139,17 +139,15 @@ width: 100%; overflow: hidden; span.property-value { - padding: 2px 4px; - background-color: var(--secondary-color-darker); - color: var(--secondary-color); + padding: 0.2rem 0.4rem; + background-color: var(--secondary-color-1); + color: var(--primary-color-dark); border-radius: var(--border-radius-small); justify-content: space-between; flex-shrink: 1; - - &:has(*) { - overflow: hidden; - padding: 0; - } + display: flex; + align-items: center; + overflow: hidden; &:has(ion-icon) { flex-shrink: 0; @@ -157,12 +155,12 @@ * { display: block; - padding: 2px 4px; overflow: hidden; text-wrap: nowrap; text-overflow: ellipsis; flex-shrink: 1; } + ion-icon { font-size: 1rem; padding: 4px; @@ -183,12 +181,11 @@ align-items: center; a.tag-name { word-break: break-word; - color: #d1d1ee; text-decoration: none; } span.tag-post-count { - background-color: var(--secondary-color-darker); - color: var(--secondary-color); + background-color: var(--secondary-color-3); + color: var(--secondary-color-8); padding: 0px 4px; border-radius: var(--border-radius-small); font-size: 12px;