duckylib 0.1.6 → 0.1.8

package/dist/components/buttons/LoginButton.svelte

@@ -4,16 +4,15 @@
     interface LoginButtonProps {
         label?: string;
         withIcon?: boolean;
+
+        onlogin?: () => Promise<void>;
     }
 
-    let {label = "Log In", withIcon = true}: LoginButtonProps = $props();
+    let {label = "Log In", withIcon = true, onlogin}: LoginButtonProps = $props();
 
-    function login() {
-        console.log("login")
-    }
 </script>
 
-<button onclick={login}>
+<button onclick={async () => await onlogin}>
 {#if withIcon}<Symbol name="account_circle" inheritColor={true} sizePx={20} hoverEffect={false} />{/if}
     <p class="font-bold">{label}</p>
 </button>

package/dist/components/buttons/LoginButton.svelte.d.ts

@@ -1,6 +1,7 @@
 interface LoginButtonProps {
     label?: string;
     withIcon?: boolean;
+    onlogin?: () => Promise<void>;
 }
 declare const LoginButton: import("svelte").Component<LoginButtonProps, {}, "">;
 type LoginButton = ReturnType<typeof LoginButton>;

package/dist/components/buttons/ThemeButton.svelte

@@ -33,6 +33,10 @@
         if(browser) {
             themes.filter(t => t !== (theme === "system" ? systemMode : theme)).forEach(t => document.body.classList.remove(t))
             document.body.classList.add(theme === "system" ? systemMode : theme)
+
+            window.addEventListener("theme", (e: any) => {
+                theme = e.detail.theme;
+            })
         }
     })
 
@@ -80,7 +84,7 @@
         outline: none;
         border: none;
 
-        color: var(--text);
+        /* color: var(--text); */
     }
     
     .icon_only {
@@ -104,23 +108,38 @@
     .with_text {
         padding: 0.2em 0.66em;
         border-radius: var(--border-md);
-        background-color: var(--overlay-2);
-        color: var(--base);
+        background-color: var(--crust);
+        color: var(--text);
         gap: 0.66em;
         
         font-size: 1em;
+        border: 2px solid var(--mantle);
+    }
+
+    .btn-dark:not(.icon_only)[data-theme="system"] {
+        color: var(--teal);
+        & {
+            p {
+                color: var(--text);
+            }
+        }
     }
 
     .btn-dark:not(.icon_only):not([data-theme="system"]) {
         color: var(--yellow);
         & {
             p {
-                color: var(--base);
+                color: var(--text);
             }
         }
     }
 
     .btn-light:not(.icon_only) {
-        color: var(--surface-0);
+        color: var(--yellow);
+        & {
+            p {
+                color: var(--text);
+            }
+        }
     }
 </style>

package/dist/components/buttons/UserToast.svelte

@@ -11,9 +11,10 @@
 
     interface UserToastProps {
         user: Auth.User;
+        onlogout?: () => Promise<void>;
     }
 
-    let { user }: UserToastProps = $props();
+    let { user, onlogout }: UserToastProps = $props();
 
     let showContextMenu = $state(false);
 
@@ -69,7 +70,7 @@
         <contextentry
             data-disabled="false"
             id="log-out"
-            onclick={(e: any) => {}}
+            onclick={async () => await onlogout}
         >
             <span class="material-symbols-outlined">logout</span>
             <red>Log Out</red>

package/dist/components/buttons/UserToast.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Auth } from "../../types.ts";
 interface UserToastProps {
     user: Auth.User;
+    onlogout?: () => Promise<void>;
 }
 declare const UserToast: import("svelte").Component<UserToastProps, {}, "">;
 type UserToast = ReturnType<typeof UserToast>;

package/dist/components/containers/AgeConfirm.svelte

@@ -4,7 +4,7 @@
     import Column from "./Column.svelte";
     import Text from "../text/Text.svelte"
     import Row from "./Row.svelte";
-    import { onMount } from "svelte";
+    import { onMount, type Snippet } from "svelte";
     import Button from "../buttons/Button.svelte";
     import { browser } from "$app/environment";
     import Symbol from "../text/Symbol.svelte";
@@ -13,9 +13,10 @@
     interface AgeConfirmProps {
         age?: number;
         references?: ("substances" | "sexual" | "death" | "sh")[];
+        onDenial: (e: MouseEvent) => Promise<void>;
     }
 
-    let {age = 18, references = []}: AgeConfirmProps = $props();
+    let {age = 18, references = [], onDenial}: AgeConfirmProps = $props();
 
     const referenceMap = {
         "substances": "Alcohol, Drugs, and Substance Abuse",
@@ -68,7 +69,7 @@
         <Text weight="normal" classList={["italic"]}>{loaded ? `You must be at least ${age} years old to access this website.` : ""}</Text>
         <Row>
             <Button label="I am {age} or older" size="large" type="success" onclick={(e) => {setAgeVerified(true)}} />
-            <Button label="I am younger than {age}" size="large" type="danger" onclick={(e) => {setAgeVerified(false)}} />
+            <Button label="I am younger than {age}" size="large" type="danger" onclick={(e) => {setAgeVerified(false); onDenial(e);}} />
         </Row>
         {/if}
     </Column>
@@ -85,7 +86,7 @@
         left: 0;
 
         width: 100%;
-        height: 110%; 
+        height: 120%; 
 
 
         padding: 0.33em;
@@ -95,6 +96,6 @@
         background-color: var(--base);
         color: var(--text);
 
-        z-index: 1000;
+        z-index: 4000;
     }
 </style>

package/dist/components/containers/AgeConfirm.svelte.d.ts

@@ -1,6 +1,7 @@
 interface AgeConfirmProps {
     age?: number;
     references?: ("substances" | "sexual" | "death" | "sh")[];
+    onDenial: (e: MouseEvent) => Promise<void>;
 }
 declare const AgeConfirm: import("svelte").Component<AgeConfirmProps, {}, "">;
 type AgeConfirm = ReturnType<typeof AgeConfirm>;

package/dist/components/containers/Loading.svelte

@@ -9,6 +9,8 @@
     let loaded = $state(false);
 
     onMount(() => {
+        if(!loaded) window.scrollTo({top: 0, behavior: "instant"})
+
         window.onscroll = (e) => {
             if(!loaded) {
                 e.preventDefault();
@@ -22,6 +24,8 @@
         }, 7e2)
     })
 
+    let { children } = $props();
+
 </script>
 
 {#if !loaded}
@@ -36,6 +40,9 @@
     </Column>
 </Column>
 </div>
+
+{:else}
+{@render children()}
 {/if}
 
 <style>
@@ -57,6 +64,6 @@
         background-color: var(--base);
         color: var(--text);
 
-        z-index: 2000;
+        z-index: 5000;
     }
 </style>

package/dist/components/containers/Loading.svelte.d.ts

@@ -1,3 +1,5 @@
-declare const Loading: import("svelte").Component<Record<string, never>, {}, "">;
+declare const Loading: import("svelte").Component<{
+    children: any;
+}, {}, "">;
 type Loading = ReturnType<typeof Loading>;
 export default Loading;

package/dist/components/containers/Website.svelte

@@ -15,13 +15,14 @@
 
     let systemMode = browser ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "dark";
 
-    let theme = $state(getTheme());
+    let theme = $state("dark");
 
     let w = $state(0)
     let h = $state(0);
 
     
     onMount(() => {
+        theme = getTheme();
         if(browser) {
             w = window.outerWidth
             h = window.outerHeight

package/dist/components/containers/navigation/Footer.svelte

@@ -100,15 +100,16 @@
     @import url("../../../styles/globals.css");
 
     div {
-        /* position: absolute; */
-        /* left: 5%; */
-        /* bottom: 0.33em; */
+        position: sticky;
+        /* left: 0;
+        bottom: 0; */
 
         box-sizing: border-box;
         padding: 0 0.66em;
         margin-top: 3em;
         /* margin-left: auto;
         margin-right: auto; */
+        margin-bottom: 0.66em;
 
         width: 90%;
         height: 2.33em;

package/dist/components/containers/navigation/Header.svelte

@@ -12,7 +12,7 @@
     import { PUBLIC_MOBILE_SIZE_PX, PUBLIC_TABLET_SIZE_PX } from "$env/static/public";
     import SearchBar, { type QueryMapKeys, type SearchResult } from "./SearchBar.svelte";
 
-    interface HeaderNavigation {
+    export interface HeaderNavigation {
         label: string;
         pathname: string;
         symbol: string;
@@ -38,6 +38,8 @@
         defaultNav?: boolean;
 
         authFeatures?: boolean;
+        onlogin?: (() => Promise<void>) | null;
+        onlogout?: (() => Promise<void>) | null;
 
         nav?: HeaderNavigation[];
     }
@@ -68,6 +70,8 @@
         label = "",
 
         authFeatures = false,
+        onlogin = null,
+        onlogout = null,
 
         nav = [],
     }: HeaderProps = $props();
@@ -160,10 +164,10 @@
             {#if authFeatures}
                 <Row widthPx="fit">
 
-                    {#if user !== null}
-                        <UserToast {user} />
-                    {:else}
-                        <LoginButton label="Log in to Join" />
+                    {#if user !== null && onlogout}
+                        <UserToast {user} {onlogout} />
+                    {:else if onlogin}
+                        <LoginButton {onlogin} label="Log in to Join" />
                     {/if}
                 </Row>
             {/if}

package/dist/components/containers/navigation/Header.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 import { type QueryMapKeys, type SearchResult } from "./SearchBar.svelte";
-interface HeaderNavigation {
+export interface HeaderNavigation {
     label: string;
     pathname: string;
     symbol: string;
@@ -22,6 +22,8 @@ interface HeaderProps {
     searchQueryDataKey?: string;
     defaultNav?: boolean;
     authFeatures?: boolean;
+    onlogin?: (() => Promise<void>) | null;
+    onlogout?: (() => Promise<void>) | null;
     nav?: HeaderNavigation[];
 }
 declare const Header: import("svelte").Component<HeaderProps, {}, "">;

package/dist/components/containers/navigation/SearchBar.svelte

@@ -294,6 +294,7 @@
                     showBar = false;
                     showInput = false;
                     searching = false;
+                    closeResults();
                 }
             }}
         >

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "duckylib",
-	"version": "0.1.6",
+	"version": "0.1.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",