@indietabletop/appkit 3.2.0-0 → 3.2.0-10

package/dist/client.js

@@ -1,201 +0,0 @@
-import { Failure, Success } from "@indietabletop/appkit/async-op";
-import { mask, object, string, Struct } from "superstruct";
-import { currentUser, sessionInfo } from "./structs.js";
-export class IndieTabletopClient {
-    constructor(props) {
-        Object.defineProperty(this, "origin", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "onCurrentUser", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "onSessionInfo", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "onSessionExpired", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "refreshTokenPromise", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.origin = props.apiOrigin;
-        this.onCurrentUser = props.onCurrentUser;
-        this.onSessionInfo = props.onSessionInfo;
-        this.onSessionExpired = props.onSessionExpired;
-    }
-    async fetch(path, struct, init) {
-        // If json was provided, we stringify it. Otherwise we use body.
-        const body = init?.json ? JSON.stringify(init.json) : init?.body;
-        // If json was provided, we make sure that content type is correctly set.
-        const headers = init?.json
-            ? { ...init?.headers, "Content-Type": "application/json" }
-            : init?.headers;
-        try {
-            const res = await fetch(`${this.origin}${path}`, {
-                // Defaults
-                credentials: "include",
-                // Overrides
-                ...init,
-                body,
-                headers,
-            });
-            if (!res.ok) {
-                console.error(res);
-                return new Failure({ type: "API_ERROR", code: res.status });
-            }
-            try {
-                const data = mask(await res.json(), struct);
-                return new Success(data);
-            }
-            catch (error) {
-                console.error(error);
-                return new Failure({ type: "VALIDATION_ERROR" });
-            }
-        }
-        catch (error) {
-            console.error(error);
-            if (error instanceof Error) {
-                return new Failure({ type: "NETWORK_ERROR" });
-            }
-            return new Failure({ type: "UNKNOWN_ERROR" });
-        }
-    }
-    /**
-     * Fetches data and retries 401 failures after attempting to refresh tokens.
-     */
-    async fetchWithAuth(path, struct, init) {
-        const op = await this.fetch(path, struct, init);
-        if (op.isSuccess) {
-            return op;
-        }
-        if (op.failure.type === "API_ERROR" && op.failure.code === 401) {
-            console.info("API request failed with error 401. Refreshing tokens.");
-            const refreshOp = await this.refreshTokens();
-            if (refreshOp.isSuccess) {
-                console.info("Tokens refreshed. Retrying request.");
-                return await this.fetch(path, struct, init);
-            }
-            else {
-                console.info("Could not refresh tokens.");
-            }
-        }
-        return op;
-    }
-    async login(payload) {
-        const result = await this.fetch("/v1/sessions", object({
-            currentUser: currentUser(),
-            sessionInfo: sessionInfo(),
-        }), {
-            method: "POST",
-            json: { email: payload.email, plaintextPassword: payload.password },
-        });
-        if (result.isSuccess) {
-            this.onCurrentUser?.(result.value.currentUser);
-            this.onSessionInfo?.(result.value.sessionInfo);
-        }
-        return result;
-    }
-    async logout() {
-        return await this.fetch("/v1/sessions", object({ message: string() }), {
-            method: "DELETE",
-        });
-    }
-    async join(payload) {
-        const res = await this.fetch("/v1/users", object({
-            currentUser: currentUser(),
-            sessionInfo: sessionInfo(),
-            tokenId: string(),
-        }), {
-            method: "POST",
-            json: {
-                email: payload.email,
-                plaintextPassword: payload.password,
-                acceptedTos: payload.acceptedTos,
-                subscribedToNewsletter: payload.subscribedToNewsletter,
-            },
-        });
-        if (res.isSuccess) {
-            this.onCurrentUser?.(res.value.currentUser);
-            this.onSessionInfo?.(res.value.sessionInfo);
-        }
-        return res;
-    }
-    /**
-     * Triggers token refresh process.
-     *
-     * Note that we do not want to perform multiple concurrent token refresh
-     * actions, as that will result in unnecessary 401s. For this reason, a
-     * reference to t
-     */
-    async refreshTokens() {
-        // If there is an ongoing token refresh in progress return that. This should
-        // only deal the response payload, none of the side-effects and cleanup,
-        // which will be handled by the initial invocation.
-        const ongoingRequest = this.refreshTokenPromise;
-        if (ongoingRequest) {
-            console.info("Token refresh ongoing. Reusing existing promise.");
-            return await ongoingRequest;
-        }
-        // Cache the promise on an instance property to share a reference from
-        // other potential invocations.
-        this.refreshTokenPromise = this.fetch("/v1/sessions/access-tokens", object({ sessionInfo: sessionInfo() }), { method: "POST" });
-        const result = await this.refreshTokenPromise;
-        if (result.isSuccess) {
-            this.onSessionInfo?.(result.value.sessionInfo);
-        }
-        if (result.isFailure &&
-            result.failure.type === "API_ERROR" &&
-            result.failure.code === 401) {
-            this.onSessionExpired?.();
-        }
-        // Make sure to reset the shared reference so that subsequent invocations
-        // once again initiate token refresh.
-        delete this.refreshTokenPromise;
-        return result;
-    }
-    async requestPasswordReset(payload) {
-        return await this.fetch(`/v1/password-reset-tokens`, object({ message: string(), tokenId: string() }), { method: "POST", json: payload });
-    }
-    async checkPasswordResetCode(payload) {
-        const queryParams = new URLSearchParams({ plaintextCode: payload.code });
-        return await this.fetch(`/v1/password-reset-tokens/${payload.tokenId}?${queryParams}`, object({ message: string() }), { method: "GET" });
-    }
-    async setNewPassword(payload) {
-        const queryParams = new URLSearchParams({ plaintextCode: payload.code });
-        return await this.fetch(`/v1/password-reset-tokens/${payload.tokenId}?${queryParams}`, object({ message: string() }), { method: "PUT", json: { plaintextPassword: payload.password } });
-    }
-    async requestUserVerification() {
-        return await this.fetch(`/v1/user-verification-tokens`, object({ message: string(), tokenId: string() }), { method: "POST" });
-    }
-    async verifyUser(payload) {
-        const queryParams = new URLSearchParams({ plaintextCode: payload.code });
-        const req = await this.fetch(`/v1/user-verification-tokens/${payload.tokenId}?${queryParams}`, object({ message: string() }), { method: "PUT" });
-        if (req.isSuccess) {
-            await this.refreshTokens();
-            await this.getCurrentUser();
-        }
-        return req;
-    }
-    async getCurrentUser() {
-        const result = await this.fetchWithAuth(`/v1/users/me`, currentUser());
-        if (result.isSuccess) {
-            this.onCurrentUser?.(result.value);
-        }
-        return result;
-    }
-}

package/dist/common.css.d.ts

@@ -1,5 +0,0 @@
-export declare const itcSymbol: string;
-export declare const manofa: string;
-export declare const minion: string;
-export declare const itcCard: string;
-export declare const interactiveText: string;

package/dist/common.css.js

@@ -1,38 +0,0 @@
-import { style } from "@vanilla-extract/css";
-import { Hover, MinWidth } from "./media.js";
-export const itcSymbol = style({
-    inlineSize: "2.5rem",
-    blockSize: "2.5rem",
-    margin: "0rem auto 0.75rem",
-    "@media": {
-        [MinWidth.MEDIUM]: {
-            marginBlock: "-1rem 1.5rem",
-        },
-    },
-});
-export const manofa = style({
-    fontFamily: `"manofa", sans-serif`,
-});
-export const minion = style({
-    fontFamily: `"minion-pro", serif`,
-});
-export const itcCard = style([
-    minion,
-    {
-        backgroundColor: "white",
-    },
-]);
-export const interactiveText = style({
-    display: "inline",
-    textDecoration: "underline",
-    textDecorationColor: "hsl(from currentcolor h s l / 0.3)",
-    textUnderlineOffset: "0.15em",
-    "@media": {
-        [Hover.HOVER]: {
-            transition: "text-decoration-color 200ms",
-            ":hover": {
-                textDecorationColor: "hsl(from currentcolor h s l / 1)",
-            },
-        },
-    },
-});

package/dist/defineNetlifyConfig.d.ts

@@ -1,34 +0,0 @@
-import type { ConfigEnv, PluginOption, UserConfig } from "vite";
-export declare function defineNetlifyConfig(props: {
-    /**
-     * The server port number.
-     *
-     * Game apps start from 8000, automation apps from 9000. So far, we got:
-     *
-     * - API: 8000
-     * - Hobgoblin: 8001
-     * - Eternol: 8002
-     * - Gregbot: 9000
-     */
-    port: number;
-    /**
-     * By default, react and vanilla extract are always configured.
-     */
-    additionalPlugins?: PluginOption[];
-    /**
-     * Can be used to import from `@` at the path specified here. Has to match
-     * tsconfig > compilerOptions > paths.
-     *
-     * Do not use this, just use relative imports.
-     *
-     * @deprecated
-     */
-    resolveAlias?: string;
-    /**
-     * Determines whether input is "/index.html", or "index.html" or
-     * "/src/main.tsx" depnending on command.
-     *
-     * This is useful when using pre-rendered HTML as input.
-     */
-    conditionalInput?: boolean;
-}): ({ command }: ConfigEnv) => UserConfig;

package/dist/defineNetlifyConfig.js

@@ -1,35 +0,0 @@
-import { vanillaExtractPlugin as vanilla } from "@vanilla-extract/vite-plugin";
-import react from "@vitejs/plugin-react";
-export function defineNetlifyConfig(props) {
-    const { additionalPlugins = [], conditionalInput = false, resolveAlias, } = props;
-    return function configureVite({ command }) {
-        return {
-            define: {
-                // These vars are supplied by Netlify
-                BRANCH: JSON.stringify(process.env.BRANCH),
-                COMMIT_SHORTCODE: JSON.stringify(process.env.COMMIT_REF?.slice(0, 7)),
-            },
-            plugins: [react(), vanilla(), ...additionalPlugins],
-            esbuild: {
-                target: "es2022",
-            },
-            server: {
-                port: props.port,
-            },
-            resolve: {
-                alias: resolveAlias ? { "@": resolveAlias } : undefined,
-            },
-            build: {
-                sourcemap: true,
-                manifest: true,
-                rollupOptions: {
-                    // During `build`, we want to only deal with JS files. Production HTML
-                    // entrypoint is generated via the `build:entrypoint` package script.
-                    input: conditionalInput && command === "build"
-                        ? "/src/main.tsx"
-                        : "/index.html",
-                },
-            },
-        };
-    };
-}

package/dist/external-link.d.ts

@@ -1,4 +0,0 @@
-import type { AnchorHTMLAttributes } from "react";
-type ExternalLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "rel" | "target">;
-export declare function ExternalLink(props: ExternalLinkProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/external-link.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function ExternalLink(props) {
-    return _jsx("a", { ...props, target: "_blank", rel: "noreferrer noopener" });
-}

package/dist/form-submit-button.d.ts

@@ -1,7 +0,0 @@
-import { type FormSubmitProps } from "@ariakit/react";
-import type { ReactNode } from "react";
-export type FormSubmitButtonProps = FormSubmitProps & {
-    children: ReactNode;
-    loading: ReactNode;
-};
-export declare function FormSubmitButton(props: FormSubmitButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/form-submit-button.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormSubmit, useFormContext, useStoreState, } from "@ariakit/react";
-import { fadeIn } from "./animations.css.js";
-export function FormSubmitButton(props) {
-    const { children, className, style, loading, ...submitProps } = props;
-    const form = useFormContext();
-    const isSubmitting = useStoreState(form, (s) => s?.submitting);
-    return (_jsxs(FormSubmit, { ...submitProps, className: className, style: { position: "relative", ...style }, children: [_jsx("span", { style: { opacity: isSubmitting ? 0 : 1, transition: "200ms opacity" }, children: children }), isSubmitting && (_jsx("div", { style: {
-                    display: "flex",
-                    position: "absolute",
-                    inset: "0",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    animation: `${fadeIn} 200ms 200ms both`,
-                }, children: loading }))] }));
-}

package/dist/fullscreen-dismiss-blocker.d.ts

@@ -1,5 +0,0 @@
-/**
- * This component prevents the default MacOS behaviour where a fullscreen window
- * gets minimised by pressing Escape.
- */
-export declare function FullscreenDismissBlocker(): null;

package/dist/fullscreen-dismiss-blocker.js

@@ -1,19 +0,0 @@
-import { useEffect } from "react";
-function handleKeydown(event) {
-    if (event.key === "Escape") {
-        event.preventDefault();
-    }
-}
-/**
- * This component prevents the default MacOS behaviour where a fullscreen window
- * gets minimised by pressing Escape.
- */
-export function FullscreenDismissBlocker() {
-    useEffect(() => {
-        window.addEventListener("keydown", handleKeydown);
-        return () => {
-            window.removeEventListener("keydown", handleKeydown);
-        };
-    }, []);
-    return null;
-}

package/dist/globals.css.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/globals.css.js

@@ -1,35 +0,0 @@
-import { globalStyle } from "@vanilla-extract/css";
-globalStyle(":root", {
-    fontSynthesis: "none",
-    textRendering: "optimizeLegibility",
-    WebkitFontSmoothing: "antialiased",
-    MozOsxFontSmoothing: "grayscale",
-});
-globalStyle("*", {
-    boxSizing: "border-box",
-});
-globalStyle("img, picture, svg", {
-    display: "block",
-});
-globalStyle("a", {
-    display: "block",
-    color: "inherit",
-    textDecoration: "none",
-});
-globalStyle("input, textarea", {
-    fontFamily: "inherit",
-});
-globalStyle("button", {
-    display: "block",
-    fontSize: "inherit",
-    fontFamily: "inherit",
-    backgroundColor: "transparent",
-    border: "none",
-    color: "inherit",
-    cursor: "pointer",
-    padding: 0,
-});
-globalStyle("body, h1, h2, h3, h4, h5, h6, p, ul, li, ol", {
-    margin: 0,
-    padding: 0,
-});

package/dist/index.js

@@ -1,25 +0,0 @@
-// Components
-export * from "./ExternalLink.js";
-export * from "./FormSubmitButton.js";
-export * from "./FullscreenDismissBlocker.js";
-export * from "./IndieTabletopClubSymbol.js";
-export * from "./LetterheadFooter.js";
-export * from "./LoadingIndicator.js";
-export * from "./ServiceWorkerHandler.js";
-// Hooks
-export * from "./use-async-op.js";
-export * from "./use-document-background-color.js";
-export * from "./use-form.js";
-export * from "./use-is-installed.js";
-export * from "./use-media-query.js";
-export * from "./use-reverting-state.js";
-export * from "./use-scroll-restoration.js";
-// Utils
-export * from "./append-copy-to-text.js";
-export * from "./async-op.js";
-export * from "./caught-value.js";
-export * from "./class-names.js";
-export * from "./client.js";
-export * from "./media.js";
-export * from "./structs.js";
-export * from "./types.js";

package/dist/internal.css.d.ts

@@ -1,4 +0,0 @@
-export declare const animationDelay: `var(--${string})` | `var(--${string}, ${string})`;
-export declare const dot: string;
-export declare const padding: `var(--${string})` | `var(--${string}, ${string})`;
-export declare const letterhead: string;

package/dist/internal.css.js

@@ -1,21 +0,0 @@
-import { createVar, style } from "@vanilla-extract/css";
-import { bounce } from "./animations.css.js";
-import { minion } from "./common.css.js";
-export const animationDelay = createVar();
-export const dot = style({
-    fill: "currentcolor",
-    opacity: 0.8,
-    animation: `${bounce} 2s ${animationDelay} infinite`,
-});
-export const padding = createVar();
-export const letterhead = style([
-    minion,
-    {
-        vars: { [padding]: "clamp(1rem, 8vw, 4rem)" },
-        backgroundColor: "white",
-        padding: `max(1rem, calc(${padding} - .5rem)) ${padding} ${padding}`,
-        borderRadius: "1rem",
-        marginInline: "auto",
-        maxInlineSize: "36rem",
-    },
-]);

package/dist/media.d.ts

@@ -1,39 +0,0 @@
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- */
-export declare enum PrefersColorScheme {
-    LIGHT = "(prefers-color-scheme: light)",
-    DARK = "(prefers-color-scheme: dark)"
-}
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- */
-export declare enum PrefersReducedMotion {
-    NO_PREFERENCE = "(prefers-reduced-motion: no-preference)",
-    REDUCE = "(prefers-reduced-motion: reduce)"
-}
-export declare enum Hover {
-    NONE = "(hover: none)",
-    HOVER = "(hover: hover) and (pointer: fine)"
-}
-export declare enum MediaType {
-    PRINT = "print",
-    SCREEN = "screen"
-}
-export declare enum MinHeight {
-    TALL = "(min-height: 40em)"
-}
-export declare enum MinWidth {
-    SMALL = "(min-width: 28em)",
-    MEDIUM = "(min-width: 50em)",
-    WIDE = "(min-width: 66em)",
-    X_WIDE = "(min-width: 80em)",
-    XX_WIDE = "(min-width: 140em)"
-}
-export declare enum DisplayMode {
-    STANDALONE = "(display-mode: standalone)"
-}
-export declare enum Pointer {
-    COARSE = "(pointer: coarse)",
-    FINE = "(pointer: fine)"
-}

package/dist/media.js

@@ -1,49 +0,0 @@
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- */
-export var PrefersColorScheme;
-(function (PrefersColorScheme) {
-    PrefersColorScheme["LIGHT"] = "(prefers-color-scheme: light)";
-    PrefersColorScheme["DARK"] = "(prefers-color-scheme: dark)";
-})(PrefersColorScheme || (PrefersColorScheme = {}));
-/**
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
- */
-export var PrefersReducedMotion;
-(function (PrefersReducedMotion) {
-    PrefersReducedMotion["NO_PREFERENCE"] = "(prefers-reduced-motion: no-preference)";
-    PrefersReducedMotion["REDUCE"] = "(prefers-reduced-motion: reduce)";
-})(PrefersReducedMotion || (PrefersReducedMotion = {}));
-export var Hover;
-(function (Hover) {
-    Hover["NONE"] = "(hover: none)";
-    // Some Samsung phones incorrectly report that they have "hover" even though they
-    // do not. Adding the pointer query correctly filters these phones out.
-    Hover["HOVER"] = "(hover: hover) and (pointer: fine)";
-})(Hover || (Hover = {}));
-export var MediaType;
-(function (MediaType) {
-    MediaType["PRINT"] = "print";
-    MediaType["SCREEN"] = "screen";
-})(MediaType || (MediaType = {}));
-export var MinHeight;
-(function (MinHeight) {
-    MinHeight["TALL"] = "(min-height: 40em)";
-})(MinHeight || (MinHeight = {}));
-export var MinWidth;
-(function (MinWidth) {
-    MinWidth["SMALL"] = "(min-width: 28em)";
-    MinWidth["MEDIUM"] = "(min-width: 50em)";
-    MinWidth["WIDE"] = "(min-width: 66em)";
-    MinWidth["X_WIDE"] = "(min-width: 80em)";
-    MinWidth["XX_WIDE"] = "(min-width: 140em)";
-})(MinWidth || (MinWidth = {}));
-export var DisplayMode;
-(function (DisplayMode) {
-    DisplayMode["STANDALONE"] = "(display-mode: standalone)";
-})(DisplayMode || (DisplayMode = {}));
-export var Pointer;
-(function (Pointer) {
-    Pointer["COARSE"] = "(pointer: coarse)";
-    Pointer["FINE"] = "(pointer: fine)";
-})(Pointer || (Pointer = {}));

package/dist/service-worker-handler.d.ts

@@ -1,11 +0,0 @@
-import { type ReactNode } from "react";
-/**
- * This component handles the installation of a service worker.
- *
- * Currently it doesn't do much, but, eventually, it should provide context
- * to nested components communicating the status of the service worker installation.
- */
-export declare function ServiceWorkerHandler(props: {
-    children: ReactNode;
-    path: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/service-worker-handler.js

@@ -1,42 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from "react";
-/**
- * This component handles the installation of a service worker.
- *
- * Currently it doesn't do much, but, eventually, it should provide context
- * to nested components communicating the status of the service worker installation.
- */
-export function ServiceWorkerHandler(props) {
-    useEffect(() => {
-        async function registerWorker() {
-            // Although modern browsers all support service workers, native app's
-            // web views (eg. the Facebook app's embedded browsers) do not.
-            if ("serviceWorker" in navigator) {
-                try {
-                    const registration = await navigator.serviceWorker.register(props.path);
-                    console.info("Service worker registration obtained.");
-                    registration.addEventListener("updatefound", () => {
-                        const worker = registration.installing;
-                        console.info("Installing new service worker.");
-                        worker?.addEventListener("statechange", ({ target }) => {
-                            if (target instanceof ServiceWorker) {
-                                console.info(`Service worker state changed: '${target.state}'.`);
-                            }
-                        });
-                    });
-                }
-                catch (error) {
-                    // In rare cases, service worker installation can fail, e.g. due to network
-                    // connectivity. There is no need to report the error as there is nothing
-                    // that can be done to prevent this from occassionally happening.
-                    console.error(error);
-                }
-            }
-        }
-        void registerWorker();
-        // Note that it is not necessary to 'cleanup' the registration in
-        // the useEffect hook. Calling register() multiple times is a no-op.
-        // See https://web.dev/articles/service-workers-registration#subsequent_visits
-    }, [props.path]);
-    return _jsx(_Fragment, { children: props.children });
-}

package/dist/structs.d.ts

@@ -1,20 +0,0 @@
-export declare function currentUser(): import("superstruct").Struct<{
-    id: string;
-    email: string;
-    isVerified: boolean;
-    prefersScrollbarVisibility?: "ALWAYS" | undefined;
-}, {
-    id: import("superstruct").Struct<string, null>;
-    email: import("superstruct").Struct<string, null>;
-    isVerified: import("superstruct").Struct<boolean, null>;
-    prefersScrollbarVisibility: import("superstruct").Struct<"ALWAYS" | undefined, {
-        ALWAYS: "ALWAYS";
-    }>;
-}>;
-export declare function sessionInfo(): import("superstruct").Struct<{
-    expiresTs: number;
-    createdTs: number;
-}, {
-    expiresTs: import("superstruct").Struct<number, null>;
-    createdTs: import("superstruct").Struct<number, null>;
-}>;

package/dist/structs.js

@@ -1,15 +0,0 @@
-import { boolean, enums, number, object, optional, string } from "superstruct";
-export function currentUser() {
-    return object({
-        id: string(),
-        email: string(),
-        isVerified: boolean(),
-        prefersScrollbarVisibility: optional(enums(["ALWAYS"])),
-    });
-}
-export function sessionInfo() {
-    return object({
-        expiresTs: number(),
-        createdTs: number(),
-    });
-}

package/dist/types.js

@@ -1 +0,0 @@
-import { currentUser, sessionInfo } from "./structs.js";