duckylib 0.0.1

package/README.md

@@ -0,0 +1,65 @@
+# Svelte library
+
+Everything you need to build a Svelte library, powered by [`sv`](https://npmjs.com/package/sv).
+
+Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+To recreate this project with the same configuration:
+
+```sh
+# recreate this project
+npx sv create --template library --types ts --install npm .
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```sh
+npm pack
+```
+
+To create a production version of your showcase app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```sh
+npm publish
+```

package/dist/components/buttons/LoginButton.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import Symbol from "../text/Symbol.svelte";
+
+    interface LoginButtonProps {
+        label?: string;
+        withIcon?: boolean;
+    }
+
+    let {label = "Log In", withIcon = true}: LoginButtonProps = $props();
+
+    function login() {
+        console.log("login")
+    }
+</script>
+
+<button onclick={login}>
+{#if withIcon}<Symbol name="account_circle" inheritColor={true} sizePx={20} hoverEffect={false} />{/if}
+    <p class="font-bold">{label}</p>
+</button>
+
+<style>
+    @import url("$lib/styles/globals.css");
+
+    button {
+        cursor: pointer;
+        
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+        justify-content: center;
+
+        outline: none;
+        border: none;
+
+        padding: 0.1em 0.66em;
+        border-radius: var(--border-md);
+        background-color: var(--mantle);
+        color: var(--text);
+        gap: 0.66em;
+        
+        font-size: 0.95em;
+    }
+
+    button:hover {
+        transition: all 0.2s;
+        transform: scale(1.02);
+        filter: brightness(1.1);
+    }
+
+    button:not(:hover) {
+        transition: all 0.2s;
+        transform: scale(1);
+        filter: brightness(1);
+    }
+</style>

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

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

package/dist/components/buttons/ThemeButton.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import Symbol from "../text/Symbol.svelte";
+    import {getTheme} from "../../index.js"
+    import { onMount } from "svelte";
+
+    interface ThemeButtonProps {
+        mode: "icon_only" | "with_text";
+        changeTheme: (theme: string) => void;
+    }
+
+    let {mode, changeTheme}: ThemeButtonProps = $props();
+
+    const themeSymbolMap = {
+        "dark": "dark_mode",
+        "system": "desktop_windows",
+        "light": "light_mode",
+    }
+
+    const themesTooltipMap = {
+        "dark": "Dark Mode",
+        "light": "Light Mode",
+        "system": "Match System Theme"
+    }
+
+    let systemMode = browser ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "dark";
+
+    const themes: string[] = Object.keys(themeSymbolMap);
+
+    let theme = $state(getTheme());
+
+    onMount(() => {
+        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)
+        }
+    })
+
+    function switchTheme() {
+        let ind = themes.indexOf(theme) + 1;
+        if(!themes[ind]) ind = 0;
+        let it = themes[ind]
+        theme = it as any;
+        if(browser) {
+            window.localStorage.setItem("theme", it)
+
+            let ev = new CustomEvent("theme", {detail: {theme: it}})
+            window.dispatchEvent(ev);
+
+            themes.filter(t => t !== (theme === "system" ? systemMode : theme)).forEach(t => document.body.classList.remove(t))
+            document.body.classList.add(theme === "system" ? systemMode : theme)
+        }
+
+        changeTheme(it);
+        
+    }
+</script>
+
+<button onclick={switchTheme} class="{mode} btn-{theme === "system" ? systemMode : theme}" title={themesTooltipMap[theme]} data-theme="{theme}">
+    {#if mode === "icon_only"}
+    <Symbol name={themeSymbolMap[theme]} inheritColor={true} />
+    {:else if mode === "with_text"}
+    <Symbol name={themeSymbolMap[theme]} inheritColor={true} sizePx={24} />
+    <p class="font-bold">{themesTooltipMap[theme]}</p>
+    {/if}
+</button>
+
+<style>
+    @import url("$lib/styles/globals.css");
+
+    button {
+        cursor: pointer;
+        
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+        justify-content: center;
+
+        outline: none;
+        border: none;
+
+        color: var(--text);
+    }
+    
+    .icon_only {
+        background-color: transparent;
+        
+        aspect-ratio: 1/1;
+    }
+
+    .icon_only[data-theme="dark"] {
+        color: var(--yellow);
+    }
+
+    .icon_only[data-theme="light"] {
+        color: var(--accent);
+    }
+
+    .icon_only[data-theme="system"] {
+        color: var(--teal)
+    }
+
+    .with_text {
+        padding: 0.2em 0.66em;
+        border-radius: var(--border-md);
+        background-color: var(--overlay-2);
+        color: var(--base);
+        gap: 0.66em;
+        
+        font-size: 1em;
+    }
+
+    .btn-dark:not(.icon_only):not([data-theme="system"]) {
+        color: var(--yellow);
+        & {
+            p {
+                color: var(--base);
+            }
+        }
+    }
+
+    .btn-light:not(.icon_only) {
+        color: var(--surface-0);
+    }
+</style>

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

@@ -0,0 +1,7 @@
+interface ThemeButtonProps {
+    mode: "icon_only" | "with_text";
+    changeTheme: (theme: string) => void;
+}
+declare const ThemeButton: import("svelte").Component<ThemeButtonProps, {}, "">;
+type ThemeButton = ReturnType<typeof ThemeButton>;
+export default ThemeButton;

package/dist/components/buttons/UserToast.svelte

@@ -0,0 +1,269 @@
+<script lang="ts">
+    import { browser } from "$app/environment";
+    import { goto } from "$app/navigation";
+    import { page } from "$app/state";
+    import { PUBLIC_TABLET_SIZE_PX } from "$env/static/public";
+    import type { Auth } from "../../types.js";
+    import { onMount } from "svelte";
+    import { MediaQuery } from "svelte/reactivity";
+    import Symbol from "../text/Symbol.svelte";
+    import Row from "../containers/Row.svelte";
+
+    interface UserToastProps {
+        user: Auth.User;
+    }
+
+    let { user }: UserToastProps = $props();
+
+    let showContextMenu = $state(false);
+
+    let switchingAccounts = $state(false);
+
+    let tabletQuery = new MediaQuery(`max-width:${PUBLIC_TABLET_SIZE_PX}px`);
+
+    let copystate: "copying" | "failed" | "success" | null = $state(null);
+
+    onMount(() => {
+        if (!user && browser) goto(`/login?from=${page.url.pathname}`);
+    });
+</script>
+
+<div>
+    {#if !tabletQuery.current}
+        <p class="font-bold">{user.username}</p>
+    {/if}
+    <!-- svelte-ignore a11y_invalid_attribute -->
+    <a
+        href="#"
+        onclick={() => {
+            showContextMenu = !showContextMenu;
+        }}
+        oncontextmenu={(ev) => {
+            ev.preventDefault();
+            showContextMenu = !showContextMenu;
+        }}
+        ><img
+            src={user.avatarUrl}
+            alt="avatar"
+            draggable="false"
+            title={user.username}
+        /></a
+    >
+</div>
+
+<contextmenu
+    style="visibility:{showContextMenu ? 'visible' : 'hidden'};"
+    class={showContextMenu ? "show" : "hide"}
+>
+    {#if !switchingAccounts}
+        {#if tabletQuery.current}
+            <!-- svelte-ignore a11y_click_events_have_key_events -->
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <contextentry data-disabled="true" id="informative-username">
+                <span class="material-symbols-outlined">account_circle</span>
+                {user.username}
+            </contextentry>
+        {/if}
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <contextentry
+            data-disabled="false"
+            id="log-out"
+            onclick={(e: any) => {}}
+        >
+            <span class="material-symbols-outlined">logout</span>
+            <red>Log Out</red>
+        </contextentry>
+        <hr />
+        <!-- svelte-ignore a11y_click_events_have_key_events -->
+        <!-- svelte-ignore a11y_no_static_element_interactions -->
+        <contextentry
+            data-disabled={copystate === "copying"}
+            id="informative-id"
+            title="Click to Copy"
+            onclick={async (e: CustomEvent) => {
+                let copied = false;
+                copystate = "copying";
+
+                if (browser) {
+                    window.navigator.clipboard
+                        .writeText(user.id)
+                        .then(() => {
+                            setTimeout(() => {
+                                copied = true;
+                                copystate = "success";
+                            }, 2e2);
+                        })
+                        .catch((e) => {
+                            copied = false;
+                            copystate = "failed";
+                        })
+                        .finally(() => {
+                            setTimeout(() => {
+                                copystate = null;
+                            }, 1e3);
+                        });
+                }
+            }}
+        >
+            <!-- <span class="material-symbols-outlined">logout</span> -->
+            <Row widthPx="fit" gapEm={0.33}>
+                <p class="font-bold">ID:</p>
+                {#if copystate === null}
+                    <p class="font-normal">(Click to Copy)</p>
+                {:else if copystate === "copying"}
+                    <p class="font-bold yellow">Copying...</p>
+                {:else if copystate === "failed"}
+                    <p class="font-bold red">Copy Failed</p>
+                {:else if copystate === "success"}
+                    <p class="font-bold green">Copied!</p>
+                {/if}
+                <p class="font-normal" id="copy"></p>
+            </Row>
+        </contextentry>
+    {/if}
+</contextmenu>
+
+<style>
+    @import url("$lib/styles/globals.css");
+
+    red {
+        color: var(--red);
+    }
+
+    div {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: center;
+        gap: 0.33em;
+    }
+
+    p {
+        font-size: 1em;
+    }
+
+    img {
+        width: 2em;
+        aspect-ratio: 1/1;
+        border-radius: 100px;
+        cursor: pointer;
+        user-select: none;
+    }
+
+    @keyframes show {
+        from {
+            display: none;
+            opacity: 0;
+            top: 3em;
+            right: 0.33em;
+        }
+        to {
+            display: flex;
+            opacity: 1;
+            top: 3.66em;
+            right: 0.66em;
+        }
+    }
+
+    @keyframes hide {
+        from {
+            display: flex;
+            opacity: 1;
+            top: 3.66em;
+            right: 0.66em;
+        }
+        to {
+            display: none;
+            opacity: 0;
+            top: 3em;
+            right: 0.33em;
+        }
+    }
+
+    .show {
+        animation: show 0.1s ease-in forwards;
+    }
+
+    .hide {
+        animation: hide 0.1s ease-in forwards;
+    }
+
+    contextmenu hr {
+        height: 2px;
+        border-radius: 8px;
+        margin-left: auto;
+        margin-right: auto;
+        background-color: var(--overlay-0);
+        opacity: 0.6;
+        margin: 0.66em 0;
+        margin-left: 0.33em;
+        width: 92%;
+        border: none;
+    }
+
+    contextmenu {
+        /* display: flex; */
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        width: 250px;
+
+        position: absolute;
+        top: 3.66em;
+        right: 0.66em;
+
+        user-select: none;
+        background-color: var(--surface-0);
+        filter: drop-shadow(0 3px 5px 1px var(--crust));
+
+        padding: 0.33em 0.33em;
+
+        border-radius: 8px;
+
+        /* animation: ; */
+    }
+
+    contextentry {
+        transition: opacity 10s ease-out;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-start;
+
+        gap: 0.66em;
+
+        width: 95%;
+        cursor: pointer;
+        padding: 0.1em 0.33em;
+        margin: 0.1em 0em;
+
+        border-radius: 8px;
+
+        font-family: "Noto Sans", sans-serif;
+        font-weight: 600;
+        font-size: 0.9em;
+    }
+
+    contextentry[data-disabled="true"]:not(:hover) {
+        transition: all 0.5s;
+        opacity: 0.5;
+    }
+
+    contextentry[data-disabled="true"]:hover {
+        transition: all 0.5s;
+        background: var(--overlay-0);
+        cursor: not-allowed;
+        opacity: 0.3;
+    }
+
+    contextentry:not([data-disabled="true"]):hover {
+        transition: all 0.5s;
+        background: var(--overlay-0);
+    }
+
+    contextentry:not([data-disabled="true"]):not(:hover) {
+        transition: all 0.5s;
+        background: transparent;
+    }
+</style>

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

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

package/dist/components/containers/Column.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface ColumnProps {
+        children: Snippet;
+
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between";
+        alignItems?: "center" | "flex-start" | "flex-end" | "space-between";
+        textAlign?: "center" | "left" | "right" | "justify";
+        gapEm?: number;
+        textWrap?: boolean;
+        flexWrap?: boolean;
+
+        backgroundColor?: string | "transparent";
+
+        borderRadiusPx?: number;
+        widthPx?: number | "fill" | "fit";
+        heightPx?: number | "fill" | "fit";
+        widthPercent?: number;
+        heightPercent?: number;
+
+        marginRightPx?: number | "auto";
+        marginLeftPx?: number | "auto";
+        marginTopPx?: number | "auto";
+        marginBottomPx?: number | "auto";
+    }
+
+    const { children, textWrap = false, flexWrap = false, justifyContent = "center", alignItems = "center", textAlign = "center", gapEm = 1, backgroundColor = "transparent", borderRadiusPx = 0, widthPx = "fill", heightPx = "fill", widthPercent = 0, heightPercent = 0, marginBottomPx = 0, marginLeftPx = 0, marginRightPx = 0, marginTopPx = 0 }: ColumnProps = $props();
+</script>
+
+<div style="{`
+width: ${widthPercent !== 0 ? `${widthPercent}%` : widthPx === "fill" ? "100%" : widthPx === "fit" ? "auto" : `${widthPx}px`};
+height: ${heightPercent !== 0 ? `${heightPercent}%` : heightPx === "fill" ? "100%" : heightPx === "fit" ? "auto" : `${heightPx}px`};
+text-wrap: ${textWrap ? "wrap" : "nowrap"};
+display: flex;
+flex-direction: column;
+flex-wrap: ${flexWrap ? "wrap" : "nowrap"};
+justify-content: ${justifyContent};
+align-items: ${alignItems};
+gap: ${gapEm}em;
+border-radius: ${borderRadiusPx}px;
+text-align: ${textAlign};
+margin-left: ${marginLeftPx === "auto" ? "auto" : `${marginLeftPx}px`};
+margin-right: ${marginRightPx === "auto" ? "auto" : `${marginRightPx}px`};
+margin-bottom: ${marginBottomPx === "auto" ? "auto" : `${marginBottomPx}px`};
+margin-top: ${marginTopPx === "auto" ? "auto" : `${marginTopPx}px`};
+
+`}">
+    {@render children()}
+</div>
+
+<style>
+    @import url("$lib/styles/globals.css");
+</style>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+interface ColumnProps {
+    children: Snippet;
+    justifyContent?: "center" | "flex-start" | "flex-end" | "space-between";
+    alignItems?: "center" | "flex-start" | "flex-end" | "space-between";
+    textAlign?: "center" | "left" | "right" | "justify";
+    gapEm?: number;
+    textWrap?: boolean;
+    flexWrap?: boolean;
+    backgroundColor?: string | "transparent";
+    borderRadiusPx?: number;
+    widthPx?: number | "fill" | "fit";
+    heightPx?: number | "fill" | "fit";
+    widthPercent?: number;
+    heightPercent?: number;
+    marginRightPx?: number | "auto";
+    marginLeftPx?: number | "auto";
+    marginTopPx?: number | "auto";
+    marginBottomPx?: number | "auto";
+}
+declare const Column: import("svelte").Component<ColumnProps, {}, "">;
+type Column = ReturnType<typeof Column>;
+export default Column;

package/dist/components/containers/Row.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    interface RowProps {
+        children: Snippet;
+
+        justifyContent?: "center" | "flex-start" | "flex-end" | "space-between";
+        alignItems?: "center" | "flex-start" | "flex-end" | "space-between";
+        textAlign?: "center" | "left" | "right" | "justify";
+        gapEm?: number;
+        textWrap?: boolean;
+        flexWrap?: boolean;
+
+        backgroundColor?: string | "transparent";
+
+        borderRadiusPx?: number;
+        widthPx?: number | "fill" | "fit";
+        heightPx?: number | "fill" | "fit";
+        widthPercent?: number;
+        heightPercent?: number;
+
+        marginRightPx?: number | "auto";
+        marginLeftPx?: number | "auto";
+        marginTopPx?: number | "auto";
+        marginBottomPx?: number | "auto";
+    }
+
+    const { children, textWrap = false, flexWrap = false,justifyContent = "center", alignItems = "center", textAlign = "center", gapEm = 1, backgroundColor = "transparent", borderRadiusPx = 0, widthPx = "fill", heightPx = "fill", widthPercent = 0, heightPercent = 0, marginBottomPx = 0, marginLeftPx = 0, marginRightPx = 0, marginTopPx = 0 }: RowProps = $props();
+</script>
+
+<div style="{`
+width: ${widthPercent !== 0 ? `${widthPercent}%` : widthPx === "fill" ? "100%" : widthPx === "fit" ? "auto" : `${widthPx}px`};
+height: ${heightPercent !== 0 ? `${heightPercent}%` : heightPx === "fill" ? "100%" : heightPx === "fit" ? "auto" : `${heightPx}px`};
+text-wrap: ${textWrap ? "wrap" : "nowrap"};
+display: flex;
+flex-direction: row;
+flex-wrap: ${flexWrap ? "wrap" : "nowrap"};
+justify-content: ${justifyContent};
+align-items: ${alignItems};
+gap: ${gapEm}em;
+border-radius: ${borderRadiusPx}px;
+text-align: ${textAlign};
+margin-left: ${marginLeftPx === "auto" ? "auto" : `${marginLeftPx}px`};
+margin-right: ${marginRightPx === "auto" ? "auto" : `${marginRightPx}px`};
+margin-bottom: ${marginBottomPx === "auto" ? "auto" : `${marginBottomPx}px`};
+margin-top: ${marginTopPx === "auto" ? "auto" : `${marginTopPx}px`};
+`}">
+    {@render children()}
+</div>
+
+<style>
+    @import url("$lib/styles/globals.css");
+</style>