Privatri is now responsive

wco/apx/apx.js

@@ -609,3 +609,28 @@ apx.indexedDB.del = async (db, storeName, key) => {
     request.onerror = (error) => reject(error);
   });
 };
+
+apx.indexedDB.getAllKeys = async (db, storeName) => {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(db, 1);
+
+        request.onsuccess = (event) => {
+            const db = event.target.result;
+
+            const transaction = db.transaction(storeName, "readonly");
+            const store = transaction.objectStore(storeName);
+
+            const keysRequest = store.getAllKeys();
+
+            keysRequest.onsuccess = (event) => {
+                resolve(event.target.result);
+            };
+
+            keysRequest.onerror = (event) => {
+                reject(event);
+            };
+        };
+
+        request.onerror = (error) => reject(error);
+    });
+}

wco/privatri/main.mustache

@@ -1,6 +1,6 @@
-<section class="w-fit min-w-110 h-screen max-h-screen bg-base-100 border-r border-solid border-r-base-300 relative flex flex-col">
+<section class="w-fit md:min-w-110 h-screen max-h-screen bg-base-100 border-r border-solid border-r-base-300 relative flex flex-col">
     <div class="w-full h-12 max-h-12 flex items-center justify-evenly mt-4 mb-4 flex-shrink-0">
-        <div class="dropdown h-full">
+        <div class="dropdown h-full hidden md:block">
             <div tabindex="0" role="button" class="h-full flex items-center">
                 <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="h-full fill-current text-base-content">
                     <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
@@ -14,7 +14,27 @@
                 {{/appOptions}}
             </ul>
         </div>
-        <label class="input rounded-lg md-4">
+        <div class="drawer md:hidden">
+            <input id="my-drawer" type="checkbox" class="drawer-toggle"/>
+            <div class="drawer-content">
+                <label for="my-drawer" class="btn btn-ghost drawer-button h-full flex items-center hover:bg-transparent hover:shadow-none border-none">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="h-full fill-current text-base-content">
+                        <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
+                    </svg>
+                </label>
+            </div>
+            <div class="drawer-side">
+                <label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+                <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
+                    {{#appOptions}}
+                        <li>
+                            <a data-template="{{template}}" class="rounded-lg">{{{title}}}</a>
+                        </li>
+                    {{/appOptions}}
+                </ul>
+            </div>
+        </div>
+        <label class="hidden md:flex input rounded-lg md-4">
             <svg class="h-4 w-4 text-base-content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                 <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" fill="none" stroke="currentColor">
                     <circle cx="11" cy="11" r="8"></circle>
@@ -23,7 +43,7 @@
             </svg>
             <input id="threadSearchBar" type="search" required placeholder="Search for threads" class="flex-1 bg-transparent outline-none placeholder:opacity-75 placeholder:text-base-content text-base-content" />
         </label>
-        <div class="dropdown dropdown-end">
+        <div class="hidden md:block dropdown dropdown-end">
             <div tabindex="0" role="button" class="m-1">
                 <svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" class="h-full fill-current text-base-content">
                     <path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/>
@@ -40,7 +60,7 @@
         </div>
     </div>
     <div id="threadsContainer" class="flex-1 overflow-y-auto flex flex-col"></div>
-    <a class="w-16 h-16 btn bg-base-content rounded-full p-0 shadow-lg flex items-center justify-center absolute bottom-8 right-8" data-template="createThread">
+    <a class="hidden md:flex w-16 h-16 btn bg-base-content rounded-full p-0 shadow-lg items-center justify-center absolute bottom-8 right-8">
         <svg xmlns="http://www.w3.org/2000/svg" height="32px" viewBox="0 -960 960 960" width="32px" class="h-full fill-current text-base-100">
             <path d="M120-160v-600q0-33 23.5-56.5T200-840h480q33 0 56.5 23.5T760-760v203q-10-2-20-2.5t-20-.5q-10 0-20 .5t-20 2.5v-203H200v400h283q-2 10-2.5 20t-.5 20q0 10 .5 20t2.5 20H240L120-160Zm160-440h320v-80H280v80Zm0 160h200v-80H280v80Zm400 280v-120H560v-80h120v-120h80v120h120v80H760v120h-80ZM200-360v-400 400Z"/>
         </svg>
@@ -67,7 +87,7 @@
         </div>
     </div>
     <div id="messagesContainer" class="w-full flex-1 min-h-0 bg-base-200 overflow-y-auto flex flex-col p-4 gap-y-6"></div>
-    <div class="flex items-center justify-center w-full h-fit pt-4 pb-4 pl-8 pr-8 gap-x-4">
+    <div class="flex items-center justify-center w-full h-fit pt-4 pb-4 pl-2 pr-4 md:pl-8 md:pr-12 gap-x-2 md:gap-x-4">
         <button id="attachmentsBtn" class="hover:bg-base-200 transition rounded-full p-2 flex items-center justify-center">
             <input id="attachmentsInput" type="file" multiple accept="image/png, image/jpeg" class="hidden"/>
             <svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" class="h-full fill-current text-base-content opacity-50">
@@ -82,4 +102,5 @@
                 </svg>
             </button>
         </div>
+    </div>
 </section>

wco/privatri/privatri.js

@@ -3,6 +3,9 @@ var apx = apx || {};
 apx.privatri = {};
 apx.privatri.templates = {};
 
+const apiUrl = "http://admin.apxtri.farm.test/api/apxtri/privatri"
+const tribe = "apxtri";
+
 apx.privatri.loadwco = async (id, dataObj = {}, ctx = null) => {
     // check if not authenticate, do nothing cause by default screensignin and wait authentification
     //       if     authenticate, if url xhash then redirect if no url then change wco-link=screenmyworld
@@ -22,19 +25,66 @@ apx.privatri.loadwco = async (id, dataObj = {}, ctx = null) => {
     return Mustache.render(template, dataObj);
 };
 
-apx.privatri.syncronizeBackend = async (alias, lastConnection) => {
+async function getOldestPrivatriids(db, storeName) {
-    // const response = await fetch
+    const keysArray = await apx.indexedDB.getAllKeys(db, storeName);
-    const response = [];
     
-    for (const message of response) {
+    const oldestPerUuid = {};
-        await apx.indexedDB.set("privatri", "messages", message);
+
+    for (const key of keysArray) {
+        const [uuid, timestampStr] = key.split("_");
+        const timestamp = Number(timestampStr);
+
+        if (!oldestPerUuid[uuid] || timestamp < oldestPerUuid[uuid].timestamp) {
+            oldestPerUuid[uuid] = { key, timestamp };
+        };
+    };
+
+    const oldestKeysArray = Object.values(oldestPerUuid).map(obj => obj.key)
+
+    const threadsArray = [];
+
+    for (key of oldestKeysArray) {
+        threadsArray.push(await apx.indexedDB.get(db, storeName, key));
+    };
+
+    return threadsArray;
+};
+
+apx.privatri.syncronizeBackend = async (alias, lastConnection) => {
+    const threadsArray = await getOldestPrivatriids("privatri", "messages");
+
+    for (const threadObj of threadsArray) {
+        try {
+            const response = await fetch(`${apiUrl}/${tribe}/${threadObj.thread}?since=${lastConnection}`);
+    
+            if (response.ok === false) {
+                throw new Error("HTTP error");
+            };
+    
+            console.log(response);
+
+            // for (const message of response) {
+            //     await apx.indexedDB.set("privatri", "messages", message);
+            // };
+        } catch (error) {
+            const displayToastAlert = async (message) => {
+                return await apx.privatri.loadwco("toastAlert", { message });
+            };
+
+            document.querySelector("body").insertAdjacentHTML("beforeend", await displayToastAlert("An error occurred while synchronizing messages. Please try again later."));
+        };
     };
 };
 
 apx.privatri.templates.scripts = {
     createThread: async () => {
+        const bodyEl = document.querySelector("body");
         const autoDeletionBtnElArray = document.querySelectorAll("li.autoDeletionBtn");
 
+        const displayToastAlert = async (message) => {
+            return await apx.privatri.loadwco("toastAlert", { message });
+        };
+        
         autoDeletionBtnElArray.forEach(btn => {
             btn.addEventListener("click", () => {
                 autoDeletionBtnElArray.forEach(btn => btn.classList.remove("bg-base-200"));
@@ -70,10 +120,20 @@ apx.privatri.templates.scripts = {
                 };
             })(publicKey);
         
-            // Faire un post sur l'endpoint /privatri
+            try {
+                const response = await fetch(`${apiUrl}/`);
+
+                if (response.ok === false) {
+                    throw new Error("HTTP error");
+                };
 
                 await apx.indexedDB.set("privatri", "threads", { uuid: messageObj.thread, privateKey: privateKey });
                 await apx.indexedDB.set("privatri", "messages", messageObj);
+
+                bodyEl.insertAdjacentHTML("beforeend", await displayToastAlert("Thread created successfully."));
+            } catch (error) {
+                bodyEl.insertAdjacentHTML("beforeend", await displayToastAlert("An error occurred while creating the thread. Please try again later."));
+            };
         });
     },
     inviteAlias: async () => {
@@ -92,7 +152,7 @@ apx.privatri.templates.scripts = {
             height: 425,
             type: "svg",
             data: url,
-            image: "./assets/icon.png",
+            image: "static/img/icons/privatri.png",
             dotsOptions: {
                 color: "#ffffff",
                 type: "rounded"
@@ -251,61 +311,6 @@ apx.privatri.templates.scripts = {
     }
 };
 
-async function getOldestPrivatriids(dbName, storeName) {
-    return new Promise((resolve, reject) => {
-        const request = indexedDB.open(dbName, 1);
-
-        request.onupgradeneeded = (event) => {
-            const db = event.target.result;
-
-            if (!db.objectStoreNames.contains("threads")) {
-                db.createObjectStore("threads", { keyPath: "uuid" });
-            };
-
-            if (!db.objectStoreNames.contains("messages")) {
-                db.createObjectStore("messages", { keyPath: "privatriid" });
-            };
-        };
-
-        request.onsuccess = (event) => {
-            const db = event.target.result;
-
-            if (!db.objectStoreNames.contains(storeName)) {
-                resolve([]);
-                return;
-            };
-
-            const transaction = db.transaction(storeName, "readonly");
-            const store = transaction.objectStore(storeName);
-            const cursorRequest = store.openCursor();
-            const uuidMap = {};
-
-            cursorRequest.onsuccess = (event) => {
-                const cursor = event.target.result;
-                if (cursor) {
-                    const obj = cursor.value;
-
-                    const [uuid, timestamp] = obj.privatriid.split("_");
-
-                    if (!uuidMap[uuid] || Number(timestamp) < uuidMap[uuid].timestamp) {
-                        uuidMap[uuid] = { privatriid: obj.privatriid, timestamp: Number(timestamp) };
-                    };
-
-                    cursor.continue();
-                } else {
-                    const result = Object.values(uuidMap).map(event => event.privatriid);
-                    
-                    resolve(result);
-                };
-            };
-
-            cursorRequest.onerror = (event) => reject(event);
-        };
-
-        request.onerror = (event) => reject(event);
-    });
-};
-
 apx.ready(async () => {
     document.querySelector("body").innerHTML = await apx.privatri.loadwco("main", JSON.parse(localStorage.getItem("admin")).tpldata.privatri_main_privatri);
     
@@ -321,16 +326,17 @@ apx.ready(async () => {
     await (async () => {
         const lastConnection = JSON.parse(localStorage.getItem("lastConnection")) || Date.now();
     
-        await apx.privatri.syncronizeBackend(apx.data.headers.xalias, lastConnection);
+        // await apx.privatri.syncronizeBackend(apx.data.headers.xalias, lastConnection);
     
         const privatriidArray = await getOldestPrivatriids("privatri", "messages");
+        console.log(privatriidArray);
     
         const thread = async (name, uuid) => {
             return await apx.privatri.loadwco("thread", { uuid, name });
         };
     
-        for (const privatriid of privatriidArray) {
+        for (const privatriidObj of privatriidArray) {
-            const obj = await apx.indexedDB.get("privatri", "messages", privatriid)
+            const obj = await apx.indexedDB.get("privatri", "messages", privatriidObj.privatriid)
             
             const privateKey = (await apx.indexedDB.get("privatri", "threads", obj.thread)).privateKey;
             const name = (await apx.crypto.decryptMessage(obj.title, privateKey)).data;
@@ -542,14 +548,21 @@ apx.ready(async () => {
             
             messageInputEl.value = "";
 
-            // Faire un post sur l'endpoint /privatri
+            try {
+                const response = await fetch(`${apiUrl}/`);
+
+                if (response.ok === false) {
+                    throw new Error("HTTP error");
+                };
 
                 await apx.indexedDB.set("privatri", "messages", messageObj);
+            } catch (error) {
+                bodyEl.insertAdjacentHTML("beforeend", await displayToastAlert("An error occurred while sending the message. Please try again later."));
+            };
         };
     });
 
     window.addEventListener("beforeunload", () => {
-        // if (apx)
         localStorage.setItem("lastConnection", JSON.stringify(Date.now()));
     });
 

wco/privatri/thread.mustache

@@ -1,7 +1,7 @@
 <ul data-uuid="{{uuid}}" class="list hover:bg-base-200 transition">
-    <li class="list-row items-center">
+    <li class="gap-x-0 md:gap-x-4 list-row items-center">
         <img class="size-12 rounded-full bg-base-content" src=""/>
-        <div class="text-xl font-medium">{{name}}</div>
+        <div class="hidden md:block text-xl font-medium">{{name}}</div>
-        <span class="badge h-8 bg-info text-info-content font-semibold border-transparent">17</span>
+        <span class="hidden md:flex badge h-8 bg-info text-info-content font-semibold border-transparent">17</span>
     </li>
 </ul>

wwws/admin/src/static/css/output.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 @font-face {
   font-family: 'Questrial';
@@ -292,6 +292,7 @@
     overflow-y: hidden;
     overscroll-behavior: contain;
     z-index: 999;
+    scrollbar-gutter: auto;
     &::backdrop {
       display: none;
     }
@@ -331,7 +332,6 @@
       opacity: 0%;
       font-size: 0.875rem;
       line-height: 1.25;
-      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
       background-color: var(--tt-bg);
       width: max-content;
       pointer-events: none;
@@ -339,12 +339,20 @@
       --tw-content: attr(data-tip);
       content: var(--tw-content);
     }
+    @media (prefers-reduced-motion: no-preference) {
+      & > :where(.tooltip-content), &:where([data-tip]):before {
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+      }
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      &:after {
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+      }
+    }
     &:after {
-      position: absolute;
       position: absolute;
       opacity: 0%;
       background-color: var(--tt-bg);
-      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
       content: "";
       pointer-events: none;
       width: 0.625rem;
@@ -359,9 +367,13 @@
       > .tooltip-content, &[data-tip]:before, &:after {
         opacity: 100%;
         --tt-pos: 0rem;
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        & > .tooltip-content, &[data-tip]:before, &:after {
           transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
         }
       }
+    }
     > .tooltip-content, &[data-tip]:before {
       transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
       inset: auto auto var(--tt-off) 50%;
@@ -389,7 +401,6 @@
       opacity: 0% !important;
       font-size: 0.875rem !important;
       line-height: 1.25 !important;
-      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
       background-color: var(--tt-bg) !important;
       width: max-content !important;
       pointer-events: none !important;
@@ -397,12 +408,20 @@
       --tw-content: attr(data-tip) !important;
       content: var(--tw-content) !important;
     }
+    @media (prefers-reduced-motion: no-preference) {
+      & > :where(.tooltip-content), &:where([data-tip]):before {
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
+      }
+    }
+    @media (prefers-reduced-motion: no-preference) {
+      &:after {
+        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
+      }
+    }
     &:after {
-      position: absolute !important;
       position: absolute !important;
       opacity: 0% !important;
       background-color: var(--tt-bg) !important;
-      transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms !important;
       content: "" !important;
       pointer-events: none !important;
       width: 0.625rem !important;
@@ -417,9 +436,13 @@
       > .tooltip-content, &[data-tip]:before, &:after {
         opacity: 100% !important;
         --tt-pos: 0rem !important;
+      }
+      @media (prefers-reduced-motion: no-preference) {
+        & > .tooltip-content, &[data-tip]:before, &:after {
           transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
         }
       }
+    }
     > .tooltip-content, &[data-tip]:before {
       transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem)) !important;
       inset: auto auto var(--tt-off) 50% !important;
@@ -476,13 +499,13 @@
         opacity: 0%;
       }
     }
-    &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected="true"]) {
+    &:checked, &:is(label:has(:checked)), &:is(.tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) {
       & + .tab-content {
         display: block;
         height: calc(100% - var(--tab-height) + var(--border));
       }
     }
-    &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected="true"]) {
+    &:not(:checked, label:has(:checked), :hover, .tab-active, [aria-selected=true], [aria-current=true], [aria-current=page]) {
       color: var(--color-base-content);
       @supports (color: color-mix(in lab, red, red)) {
         color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
@@ -693,12 +716,14 @@
     }
     &[popover], .dropdown-content {
       z-index: 999;
+      @media (prefers-reduced-motion: no-preference) {
         animation: dropdown 0.2s;
         transition-property: opacity, scale, display;
         transition-behavior: allow-discrete;
         transition-duration: 0.2s;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
       }
+    }
     @starting-style {
       &[popover], .dropdown-content {
         scale: 95%;
@@ -822,7 +847,7 @@
         }
       }
     }
-    &:focus-visible {
+    &:focus-visible, &:has(:focus-visible) {
       outline-width: 2px;
       outline-style: solid;
       isolation: isolate;
@@ -906,8 +931,10 @@
     border-radius: var(--radius-box, 1rem);
     width: 100%;
     grid-template-rows: max-content 0fr;
-    transition: grid-template-rows 0.2s;
     isolation: isolate;
+    @media (prefers-reduced-motion: no-preference) {
+      transition: grid-template-rows 0.2s;
+    }
     > input:is([type="checkbox"], [type="radio"]) {
       grid-column-start: 1;
       grid-row-start: 1;
@@ -943,21 +970,27 @@
     }
     &:is([open], :focus:not(.collapse-close)) > :where(.collapse-content), &:not(.collapse-close) > :where(input:is([type="checkbox"], [type="radio"]):checked ~ .collapse-content) {
       padding-bottom: 1rem;
+      @media (prefers-reduced-motion: no-preference) {
         transition: padding 0.2s ease-out, background-color 0.2s ease-out;
       }
+    }
     &:is([open]) {
       &.collapse-arrow {
         > .collapse-title:after {
+          @media (prefers-reduced-motion: no-preference) {
             transform: translateY(-50%) rotate(225deg);
           }
         }
       }
+    }
     &.collapse-open {
       &.collapse-arrow {
         > .collapse-title:after {
+          @media (prefers-reduced-motion: no-preference) {
             transform: translateY(-50%) rotate(225deg);
           }
         }
+      }
       &.collapse-plus {
         > .collapse-title:after {
           content: "−";
@@ -1103,8 +1136,10 @@
     width: max-content;
     max-width: calc(100vw - 2rem);
     & > * {
+      @media (prefers-reduced-motion: no-preference) {
         animation: toast 0.25s ease-out;
       }
+    }
     &:where(.toast-start) {
       inset-inline-start: calc(0.25rem * 4);
       inset-inline-end: auto;
@@ -1323,7 +1358,7 @@
       direction: ltr;
     }
     :where(input[type="date"]) {
-      display: inline-block;
+      display: inline-flex;
     }
     &:focus, &:focus-within {
       --input-color: var(--color-base-content);
@@ -1336,7 +1371,7 @@
       isolation: isolate;
       z-index: 1;
     }
-    &:has(> input[disabled]), &:is(:disabled, [disabled]) {
+    &:has(> input[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & {
       cursor: not-allowed;
       border-color: var(--color-base-200);
       background-color: var(--color-base-200);
@@ -1368,6 +1403,20 @@
       position: absolute;
       inset-inline-end: 0.75em;
     }
+    &:has(> input[type="date"]) {
+      :where(input[type="date"]) {
+        display: inline-flex;
+        webkit-appearance: none;
+        appearance: none;
+      }
+      input[type="date"]::-webkit-calendar-picker-indicator {
+        position: absolute;
+        inset-inline-end: 0.75em;
+        width: 1em;
+        height: 1em;
+        cursor: pointer;
+      }
+    }
   }
   .indicator {
     position: relative;
@@ -1827,7 +1876,8 @@
       appearance: none;
       padding-inline-start: calc(0.25rem * 4);
       padding-inline-end: calc(0.25rem * 7);
-      height: calc(100% - 2px);
+      height: calc(100% - calc(var(--border) * 2));
+      align-items: center;
       background: inherit;
       border-radius: inherit;
       border-style: none;
@@ -1855,7 +1905,7 @@
       isolation: isolate;
       z-index: 1;
     }
-    &:has(> select[disabled]), &:is(:disabled, [disabled]) {
+    &:has(> select[disabled]), &:is(:disabled, [disabled]), fieldset:disabled & {
       cursor: not-allowed;
       border-color: var(--color-base-200);
       background-color: var(--color-base-200);
@@ -1873,6 +1923,66 @@
     &:has(> select[disabled]) > select[disabled] {
       cursor: not-allowed;
     }
+    &, & select {
+      @supports (appearance: base-select) {
+        appearance: base-select;
+      }
+      @supports (appearance: base-select) {
+        &::picker(select) {
+          appearance: base-select;
+        }
+      }
+      &::picker(select) {
+        color: inherit;
+        max-height: 70dvh;
+        border: var(--border) solid var(--color-base-200);
+        margin-block: calc(0.25rem * 2);
+        border-radius: var(--radius-box);
+        padding: calc(0.25rem * 2);
+        background-color: inherit;
+        box-shadow: 0 2px calc(var(--depth) * 3px) -2px oklch(0% 0 0/0.2);
+        box-shadow: 0 20px 25px -5px rgb(0 0 0 / calc(var(--depth) * 0.1)), 0 8px 10px -6px rgb(0 0 0 / calc(var(--depth) * 0.1));
+      }
+      &::picker-icon {
+        display: none;
+      }
+      optgroup {
+        padding-top: 0.5em;
+        option {
+          &:nth-child(1) {
+            margin-top: 0.5em;
+          }
+        }
+      }
+      option {
+        border-radius: var(--radius-field);
+        padding-inline: calc(0.25rem * 3);
+        padding-block: calc(0.25rem * 1.5);
+        transition-property: color, background-color;
+        transition-duration: 0.2s;
+        transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+        &:not(:disabled) {
+          &:hover, &:focus-visible {
+            cursor: pointer;
+            background-color: var(--color-base-content);
+            @supports (color: color-mix(in lab, red, red)) {
+              background-color: color-mix(in oklab, var(--color-base-content) 10%, transparent);
+            }
+            --tw-outline-style: none;
+            outline-style: none;
+            @media (forced-colors: active) {
+              outline: 2px solid transparent;
+              outline-offset: 2px;
+            }
+          }
+          &:active {
+            background-color: var(--color-neutral);
+            color: var(--color-neutral-content);
+            box-shadow: 0 2px calc(var(--depth) * 3px) -2px var(--color-neutral);
+          }
+        }
+      }
+    }
   }
   .card {
     position: relative;
@@ -1962,10 +2072,12 @@
     > * {
       grid-column-start: 1;
       grid-row-start: 1;
+      @media (prefers-reduced-motion: no-preference) {
         transition-property: transform, rotate, opacity;
         transition-duration: 0.2s;
         transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
       }
+    }
     .swap-on, .swap-indeterminate, input:indeterminate ~ .swap-on {
       opacity: 0%;
     }
@@ -2021,10 +2133,7 @@
       outline-offset: 2px;
     }
     &:checked, &[aria-checked="true"] {
-      background-color: var(--input-color, var(--color-base-content));
+      background-color: var(--input-color, #0000);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: var(--input-color, color-mix(in oklab, var(--color-base-content) 20%, #0000));
-      }
       box-shadow: 0 0 #0000 inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
       &:before {
         clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
@@ -2096,9 +2205,11 @@
       outline: 2px solid currentColor;
     }
     &:checked, &[aria-checked="true"] {
-      animation: radio 0.2s ease-out;
       border-color: currentColor;
       background-color: var(--color-base-100);
+      @media (prefers-reduced-motion: no-preference) {
+        animation: radio 0.2s ease-out;
+      }
       &:before {
         background-color: currentColor;
         box-shadow: 0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset, 0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset, 0 1px oklch(0% 0 0 / calc(var(--depth) * 0.1));
@@ -2145,14 +2256,18 @@
       background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
       background-size: 200%;
       background-position-x: 15%;
+      @media (prefers-reduced-motion: no-preference) {
         animation: progress 5s ease-in-out infinite;
+      }
       @supports (-moz-appearance: none) {
         &::-moz-progress-bar {
           background-color: transparent;
+          @media (prefers-reduced-motion: no-preference) {
+            animation: progress 5s ease-in-out infinite;
             background-image: repeating-linear-gradient( 90deg, currentColor -1%, currentColor 10%, #0000 10%, #0000 90% );
             background-size: 200%;
             background-position-x: 15%;
-          animation: progress 5s ease-in-out infinite;
+          }
         }
       }
     }
@@ -2822,8 +2937,10 @@
     display: inline-flex;
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
     scrollbar-width: none;
+    @media (prefers-reduced-motion: no-preference) {
+      scroll-behavior: smooth;
+    }
     &::-webkit-scrollbar {
       display: none;
     }
@@ -3192,11 +3309,13 @@
       transition-duration: 15s;
     }
     will-change: background-position;
-    animation: skeleton 1.8s ease-in-out infinite;
     background-image: linear-gradient( 105deg, #0000 0% 40%, var(--color-base-100) 50%, #0000 60% 100% );
     background-size: 200% auto;
     background-repeat: no-repeat;
     background-position-x: -50%;
+    @media (prefers-reduced-motion: no-preference) {
+      animation: skeleton 1.8s ease-in-out infinite;
+    }
   }
   .link {
     cursor: pointer;
@@ -3803,7 +3922,7 @@
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
   .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -4177,7 +4296,7 @@
 }
 @layer base {
   @media (prefers-color-scheme: dark) {
-    :root {
+    :root:not([data-theme]) {
       color-scheme: dark;
       --color-base-100: oklch(25.33% 0.016 252.42);
       --color-base-200: oklch(23.26% 0.014 253.1);
@@ -4276,24 +4395,6 @@
     --noise: 0;
   }
 }
-@layer base {
-  :root, [data-theme] {
-    background-color: var(--root-bg, var(--color-base-100));
-    color: var(--color-base-content);
-  }
-}
-@layer base {
-  :root {
-    --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
-  }
-}
-@layer base {
-  @property --radialprogress {
-    syntax: "<percentage>";
-    inherits: true;
-    initial-value: 0%;
-  }
-}
 @layer base {
   :where( :root:has( .modal-open, .modal[open], .modal:target, .modal-toggle:checked, .drawer:not(.drawer-open) > .drawer-toggle:checked ) ) {
     scrollbar-gutter: stable;
@@ -4307,6 +4408,24 @@
     scrollbar-gutter: stable;
   }
 }
+@layer base {
+  @property --radialprogress {
+    syntax: "<percentage>";
+    inherits: true;
+    initial-value: 0%;
+  }
+}
+@layer base {
+  :root {
+    --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.2'%3E%3C/rect%3E%3C/svg%3E");
+  }
+}
+@layer base {
+  :root, [data-theme] {
+    background-color: var(--root-bg, var(--color-base-100));
+    color: var(--color-base-content);
+  }
+}
 @layer base {
   :root {
     scrollbar-color: currentColor #0000;
@@ -4320,9 +4439,9 @@
     overflow: hidden;
   }
 }
-@keyframes progress {
+@keyframes dropdown {
-  50% {
+  0% {
-    background-position-x: -115%;
+    opacity: 0;
   }
 }
 @keyframes radio {
@@ -4343,11 +4462,6 @@
     opacity: 1;
   }
 }
-@keyframes dropdown {
-  0% {
-    opacity: 0;
-  }
-}
 @keyframes rating {
   0%, 40% {
     scale: 1.1;
@@ -4362,9 +4476,14 @@
     background-position: -50%;
   }
 }
+@keyframes progress {
+  50% {
+    background-position-x: -115%;
+  }
+}
 @layer base {
   @media (prefers-color-scheme: dark) {
-    :root {
+    :root:not([data-theme]) {
       color-scheme: dark;
       --color-base-100: oklch(40% 0.016 252.42);
       --color-base-200: oklch(20% 0.014 253.1);