@indietabletop/appkit 3.1.0 → 3.2.0-1

package/dist/{external-link.d.ts → ExternalLink.d.ts}

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

package/dist/FormSubmitButton.d.ts

@@ -0,0 +1,7 @@
+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/FormSubmitButton.js

@@ -0,0 +1,16 @@
+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/FullscreenDismissBlocker.d.ts

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

package/dist/FullscreenDismissBlocker.js

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

package/dist/IndieTabletopClubLogo.d.ts

@@ -0,0 +1,7 @@
+import type { SVGAttributes } from "react";
+type IndieTabletopClubLogoProps = Omit<SVGAttributes<SVGElement>, "width" | "height" | "viewBox"> & {
+    textColor?: string;
+    symbolColor?: string;
+};
+export declare function IndieTabletopClubLogo(props: IndieTabletopClubLogoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/IndieTabletopClubLogo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function IndieTabletopClubLogo(props) {
+    const { textColor = "#161615", symbolColor = "#FF5937", ...svgProps } = props;
+    // prettier-ignore
+    return (_jsx("svg", { ...svgProps, width: "200px", height: "13px", viewBox: "0 0 200 13", children: _jsx("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: _jsx("g", { transform: "translate(-720, -746)", fillRule: "nonzero", children: _jsxs("g", { transform: "translate(720, 746)", children: [_jsx("path", { fill: textColor, d: "M162.319043,13 C160.39468,13 158.856429,12.433618 157.706354,11.3007467 C156.560409,10.1678541 155.987436,8.6527232 155.987436,6.75532194 C155.987436,5.27087812 156.347738,3.76969784 157.068341,2.25177041 L162.384083,0 C164.685265,0 166.250358,0.625027117 167.07833,1.87508242 L164.464335,4.2356719 C163.658044,3.15862455 162.711348,2.42755671 161.625281,2.04250049 L160.101483,2.04250049 C159.838226,3.28697663 159.70608,4.32217213 159.70608,5.14810843 C159.70608,6.76090433 160.056058,8.03885336 160.754982,8.98197696 C161.453905,9.91951817 162.380986,10.3882888 163.537255,10.3882888 C163.854197,10.3882888 164.179397,10.3408545 164.512857,10.2459861 C164.846317,10.1511176 165.387286,9.95858417 166.134731,9.66839641 L166.61066,10.4217724 L164.053446,13 L162.319043,13 Z" }), _jsx("polygon", { fill: textColor, points: "171.687921 10.7314717 176.244861 10.7314717 175.584135 12.7572036 168.147879 12.7572036 168.147879 0.242755671 171.687921 0.159047705" }), _jsx("path", { fill: textColor, d: "M184.113686,0.242755671 L187.646502,0.159047705 L187.646502,12.7572036 L184.113686,12.840993 L184.113686,11.8699146 L181.435684,13 C179.893303,13 178.79588,12.6512347 178.145478,11.9535969 C177.500239,11.2560662 177.177103,10.078568 177.177103,8.42113445 L177.177103,0.242755671 L180.709918,0.159047705 L180.709918,7.96073207 C180.709918,8.59133836 180.742955,9.07964196 180.806962,9.42564289 C180.877164,9.77163309 181.021698,10.0701998 181.242628,10.3213215 C181.462526,10.572454 181.763982,10.7426151 182.145964,10.8319761 C182.533107,10.9156584 183.057558,10.9575531 183.718283,10.9575531 C183.982573,9.7465177 184.113686,8.7113222 184.113686,7.85190228 L184.113686,0.242755671 Z" }), _jsx("path", { fill: textColor, d: "M197.176432,5.36574657 C198.069443,5.42155974 198.763205,5.69221449 199.257716,6.17772155 C199.752228,6.65765693 200,7.29664216 200,8.09466652 C200,8.95407573 199.690285,9.76047903 199.071887,10.513855 L193.757178,12.7572036 L189.788697,12.7572036 L189.788697,0.242755671 L195.273749,0.242755671 C198.015759,0.242755671 199.386764,1.15239351 199.386764,2.97167348 C199.386764,3.48508176 199.160672,4.06546799 198.709521,4.71282144 L197.176432,5.36574657 Z M194.595474,2.26851757 L193.329772,2.26851757 L193.329772,5.34901012 L195.44306,5.34901012 C195.59895,4.80210751 195.674314,4.40310069 195.66812,4.15196822 C195.66812,3.29813069 195.310915,2.67032095 194.595474,2.26851757 Z M196.031519,10.7314717 C196.197732,10.1846012 196.281355,9.69908348 196.281355,9.27496126 C196.281355,8.40438728 195.907633,7.77098444 195.160187,7.37476345 L193.329772,7.37476345 L193.329772,10.7314717 L196.031519,10.7314717 Z" }), _jsx("polygon", { fill: textColor, points: "0 0.242755671 3.54075462 0.159047705 3.54075462 12.7572036 0 12.840993" }), _jsx("polygon", { fill: textColor, points: "13.6033016 0.242755671 15.5551254 0.159047705 15.5551254 12.7572036 13.2403156 13 7.6267315 5.50804925 7.6267315 12.7572036 5.67487669 12.840993 5.67487669 0.242755671 7.98967617 0 13.6033016 7.55892869" }), _jsx("path", { fill: textColor, d: "M23.8028354,0.242755671 C25.6203462,0.242755671 27.0425574,0.77291326 28.0695723,1.83323058 C29.1019556,2.88795909 29.6181472,4.30543568 29.6181472,6.08564964 C29.6181472,7.48079668 29.2605297,8.95687228 28.5453978,10.513855 L23.2221198,12.7572036 L17.7053733,12.7572036 L17.7053733,0.242755671 L23.8028354,0.242755671 Z M25.5047193,10.7314717 C25.7681835,9.41447811 25.8999156,8.39880489 25.8999156,7.68449492 C25.8999156,5.03370698 24.9588982,3.22837762 23.0769668,2.26851757 L21.2461382,2.26851757 L21.2461382,10.7314717 L25.5047193,10.7314717 Z" }), _jsx("polygon", { fill: textColor, points: "31.090842 0.242755671 34.6316069 0.159047705 34.6316069 12.7572036 31.090842 12.840993" }), _jsx("polygon", { fill: textColor, points: "40.3065146 7.34127984 40.3065146 10.7314717 45.19423 10.7314717 44.532782 12.7572036 36.7657497 12.7572036 36.7657497 0.242755671 45.19423 0.242755671 44.532782 2.26851757 40.3065146 2.26851757 40.3065146 5.31552651 44.3634712 5.31552651 43.7020232 7.34127984" }), _jsx("polygon", { fill: textColor, points: "60.8105757 0.242755671 60.1572836 2.26851757 57.2134427 2.26851757 57.2134427 12.7572036 53.6807303 12.840993 53.6807303 2.26851757 50.0593362 2.26851757 50.720681 0.242755671" }), _jsx("path", { fill: textColor, d: "M67.1548807,13 L65.9773443,9.65164925 L62.2107972,9.65164925 L61.1219425,12.7572036 L59.0087572,13 L63.5012763,0.242755671 L66.3080167,0 L70.6553827,12.3136127 L67.1548807,13 Z M62.9205607,7.63426414 L65.2675808,7.63426414 L64.0980971,4.31938629 L62.9205607,7.63426414 Z" }), _jsx("path", { fill: textColor, d: "M79.1127698,5.36574657 C80.0053684,5.42155974 80.6990267,5.69221449 81.1937448,6.17772155 C81.6883596,6.65765693 81.9357187,7.29664216 81.9357187,8.09466652 C81.9357187,8.95407573 81.6265199,9.76047903 81.0082255,10.513855 L75.6930002,12.7572036 L71.7248286,12.7572036 L71.7248286,0.242755671 L77.2093647,0.242755671 C79.9515812,0.242755671 81.3227927,1.15239351 81.3227927,2.97167348 C81.3227927,3.48508176 81.0969072,4.06546799 80.6452396,4.71282144 L79.1127698,5.36574657 Z M76.5318116,2.26851757 L75.2655935,2.26851757 L75.2655935,5.34901012 L77.3787788,5.34901012 C77.5346687,4.80210751 77.6099295,4.40310069 77.6045611,4.15196822 C77.6045611,3.29813069 77.2470467,2.67032095 76.5318116,2.26851757 Z M77.967547,10.7314717 C78.1341737,10.1846012 78.2175903,9.69908348 78.2175903,9.27496126 C78.2175903,8.40438728 77.8438675,7.77098444 77.096422,7.37476345 L75.2655935,7.37476345 L75.2655935,10.7314717 L77.967547,10.7314717 Z" }), _jsx("polygon", { fill: textColor, points: "86.8282863 10.7314717 91.3853293 10.7314717 90.7238813 12.7572036 83.2875213 12.7572036 83.2875213 0.242755671 86.8282863 0.159047705" }), _jsx("polygon", { fill: textColor, points: "96.0035927 7.34127984 96.0035927 10.7314717 100.891308 10.7314717 100.22986 12.7572036 92.4628277 12.7572036 92.4628277 0.242755671 100.891308 0.242755671 100.22986 2.26851757 96.0035927 2.26851757 96.0035927 5.31552651 100.060549 5.31552651 99.3992045 7.34127984" }), _jsx("polygon", { fill: textColor, points: "111.848921 0.242755671 111.195422 2.26851757 108.252098 2.26851757 108.252098 12.7572036 104.719282 12.840993 104.719282 2.26851757 101.097785 2.26851757 101.759129 0.242755671" }), _jsx("path", { fill: textColor, d: "M117.951339,0 C119.876733,0 121.411887,0.566431327 122.5568,1.69929612 C123.701713,2.83215663 124.274686,4.34728752 124.274686,6.24468878 C124.274686,7.7291326 123.917482,9.23031287 123.20204,10.7481867 L117.887331,13 C115.961936,13 114.423685,12.433618 113.27361,11.3007467 C112.127665,10.1678541 111.555724,8.6527232 111.555724,6.75532194 C111.555724,5.27087812 111.916026,3.76969784 112.636629,2.25177041 L117.951339,0 Z M120.161671,10.9575531 C120.424929,9.71303409 120.559139,8.67783859 120.564301,7.85190228 C120.564301,5.02812459 119.46791,3.09165733 117.274095,2.04250049 L115.668739,2.04250049 C115.405481,3.28697663 115.273336,4.32217213 115.273336,5.14810843 C115.273336,7.97188613 116.37076,9.9083641 118.564574,10.9575531 L120.161671,10.9575531 Z" }), _jsx("path", { fill: textColor, d: "M131.070865,0.242755671 C131.796631,0.242755671 132.44187,0.312514094 133.006584,0.452028798 C133.57646,0.585963257 134.033805,0.764542892 134.377589,0.987766633 C134.727567,1.21099252 135.01457,1.47886143 135.240661,1.79137874 C135.466753,2.09830295 135.622643,2.40523787 135.708331,2.71217279 C135.800213,3.01910771 135.845638,3.34557563 135.845638,3.69156584 C135.845638,4.61795299 135.535923,5.4522468 134.917525,6.19446871 L129.602816,8.4378709 L129.287939,8.4378709 L129.287939,12.7572036 L125.747897,12.840993 L125.747897,0.242755671 L131.070865,0.242755671 Z M131.877157,6.41211757 C132.044403,5.86521495 132.126993,5.35179596 132.126993,4.87187129 C132.126993,3.66087877 131.713008,2.79309063 130.885036,2.26851757 L129.287939,2.26851757 L129.287939,6.41211757 L131.877157,6.41211757 Z" }), _jsx("polygon", { fill: symbolColor, points: "150.825519 4.65625824 149.752873 9.89656716 144.843891 11.5521149 141.007554 7.96730021 142.080201 2.7269913 146.990216 1.07147567" })] }) }) }) }));
+}

package/dist/IndieTabletopClubSymbol.d.ts

@@ -0,0 +1,7 @@
+import type { SVGAttributes } from "react";
+type IndieTabletopClubSymbolProps = Omit<SVGAttributes<SVGElement>, "width" | "height" | "viewBox"> & {
+    backgroundColor?: string;
+    symbolColor?: string;
+};
+export declare function IndieTabletopClubSymbol(props: IndieTabletopClubSymbolProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/IndieTabletopClubSymbol.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function IndieTabletopClubSymbol(props) {
+    const { symbolColor = "#FF5937", backgroundColor = "#F0F0F0", ...svgProps } = props;
+    return (_jsx("svg", { ...svgProps, width: "65px", height: "65px", viewBox: "0 0 65 65", children: _jsxs("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: [_jsx("rect", { fill: backgroundColor, x: "0", y: "0", width: "65", height: "65", rx: "11" }), _jsx("polygon", { fill: symbolColor, fillRule: "nonzero", points: "52.2105164 26.1156583 47.8803714 46.1156174 28.0633944 52.4341166 12.5765623 38.7524522 16.9067073 18.7524931 36.7278519 12.4341166" })] }) }));
+}

package/dist/Letterhead.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+export type LetterheadProps = {
+    headerIcon?: boolean;
+    children: ReactNode;
+};
+export declare function Letterhead(props: LetterheadProps): import("react/jsx-runtime").JSX.Element;

package/dist/Letterhead.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IndieTabletopClubSymbol } from "./IndieTabletopClubSymbol.js";
+import { letterhead } from "./internal.css.js";
+import { LetterheadFooter } from "./LetterheadFooter.js";
+export function Letterhead(props) {
+    const { children, headerIcon = true } = props;
+    return (_jsxs("div", { className: letterhead, children: [headerIcon && (_jsx(IndieTabletopClubSymbol, { style: {
+                    marginBlock: "-1rem 1rem",
+                    marginInline: "auto",
+                    display: "block",
+                    inlineSize: "2.5rem",
+                    blockSize: "2.5rem",
+                } })), children, _jsx(LetterheadFooter, {})] }));
+}

package/dist/LetterheadFooter.d.ts

@@ -0,0 +1 @@
+export declare function LetterheadFooter(): import("react/jsx-runtime").JSX.Element;

package/dist/LetterheadFooter.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { interactiveText } from "./common.css.js";
+import { ExternalLink } from "./ExternalLink.js";
+import { IndieTabletopClubLogo } from "./IndieTabletopClubLogo.js";
+export function LetterheadFooter() {
+    return (_jsxs("div", { style: {
+            textAlign: "center",
+            paddingBlockStart: "2rem",
+            borderBlockStart: "1px solid #ececec",
+            marginBlockStart: "3rem",
+        }, children: [_jsx(IndieTabletopClubLogo, { style: { margin: "0 auto 1.125rem" } }), _jsxs("p", { style: {
+                    margin: "0 auto",
+                    maxInlineSize: "25rem",
+                    fontSize: "0.875rem",
+                    lineHeight: "1.25rem",
+                }, children: ["Indie Tabletop Club supports independent game creators with high\u2011quality digital tools.", " ", _jsx(ExternalLink, { href: "https://indietabletop.club", className: interactiveText, children: "Learn more" }), "."] })] }));
+}

package/dist/LoadingIndicator.d.ts

@@ -0,0 +1,3 @@
+export declare function LoadingIndicator(props: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/LoadingIndicator.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { animationDelay, dot } from "./internal.css.js";
+export function LoadingIndicator(props) {
+    const diameter = 10;
+    const radius = diameter / 2;
+    const gap = diameter;
+    const cy = diameter;
+    const height = cy * 2;
+    const width = diameter * 3 + gap;
+    const initialDelay = 300;
+    const interBounceDelay = 150;
+    return (_jsx("svg", { viewBox: `0 0 ${width} ${height}`, width: width, height: height, className: props.className, children: _jsx("g", { stroke: "none", fill: "inherit", children: Array.from({ length: 3 }, (_, index) => {
+                const delay = `${initialDelay + interBounceDelay * index}ms`;
+                return (_jsx("circle", { cx: radius * (index + 1) + gap * index, cy: cy, r: radius, className: dot, style: assignInlineVars({ [animationDelay]: delay }) }, index));
+            }) }) }));
+}

package/dist/ServiceWorkerHandler.d.ts

@@ -0,0 +1,11 @@
+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/ServiceWorkerHandler.js

@@ -0,0 +1,42 @@
+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/animations.css.d.ts

@@ -0,0 +1,3 @@
+export declare const fadeIn: string;
+export declare const slideUp: string;
+export declare const bounce: string;

package/dist/animations.css.js

@@ -0,0 +1,14 @@
+import { keyframes } from "@vanilla-extract/css";
+export const fadeIn = keyframes({
+    from: { opacity: 0 },
+    to: { opacity: 1 },
+});
+export const slideUp = keyframes({
+    from: { transform: `translateY(100%)` },
+    to: { transform: `translateY(0)` },
+});
+export const bounce = keyframes({
+    "0%": { transform: "translateY(0)" },
+    "20%": { transform: "translateY(-20%)" },
+    "50%": { transform: "translateY(0)" },
+});

package/dist/common.css.d.ts

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,38 @@
+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/globals.css.d.ts

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

package/dist/globals.css.js

@@ -0,0 +1,35 @@
+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.d.ts

@@ -1,14 +1,22 @@
+export * from "./ExternalLink.tsx";
+export * from "./FormSubmitButton.tsx";
+export * from "./FullscreenDismissBlocker.tsx";
+export * from "./IndieTabletopClubSymbol.tsx";
+export * from "./LetterheadFooter.tsx";
+export * from "./LoadingIndicator.tsx";
+export * from "./ServiceWorkerHandler.tsx";
+export * from "./use-async-op.ts";
+export * from "./use-document-background-color.ts";
+export * from "./use-form.ts";
+export * from "./use-is-installed.ts";
+export * from "./use-media-query.ts";
+export * from "./use-reverting-state.ts";
+export * from "./use-scroll-restoration.ts";
 export * from "./append-copy-to-text.ts";
 export * from "./async-op.ts";
 export * from "./caught-value.ts";
 export * from "./class-names.ts";
 export * from "./client.ts";
-export * from "./external-link.tsx";
+export * from "./media.ts";
 export * from "./structs.ts";
 export * from "./types.ts";
-export * from "./use-async-op.ts";
-export * from "./use-document-background-color.ts";
-export * from "./use-is-installed.ts";
-export * from "./use-media-query.ts";
-export * from "./use-reverting-state.ts";
-export * from "./use-scroll-restoration.ts";

package/dist/index.js

@@ -1,14 +1,25 @@
+// 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 "./external-link.js";
+export * from "./media.js";
 export * from "./structs.js";
 export * from "./types.js";
-export * from "./use-async-op.js";
-export * from "./use-document-background-color.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";

package/dist/internal.css.d.ts

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,39 @@
+/**
+ * @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

@@ -0,0 +1,49 @@
+/**
+ * @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/use-form.d.ts

@@ -0,0 +1,29 @@
+import { type FormStoreState } from "@ariakit/react";
+import { Failure, Success } from "@indietabletop/appkit/async-op";
+type Validator<T> = (value: T) => string | null;
+type MaybePromise<T> = T | Promise<T>;
+export declare function useForm<T extends object, R>(props: {
+    defaultValues: T;
+    validate?: {
+        [K in keyof T]?: Validator<T[K]>;
+    };
+    /**
+     * Handles form submission login.
+     *
+     * This function should return a Success or Failure. Failures should always contain a string
+     * which will be used as the form error message.
+     */
+    onSubmit: (state: FormStoreState<T>) => MaybePromise<Success<R> | Failure<string>>;
+    /**
+     * If submission was successful (i.e. onSubmit returned a Success), will be run to perform any
+     * side-effect necessary.
+     *
+     * Typically this is used for navigation on mutating some local state.
+     */
+    onSuccess?: (value: R, state: FormStoreState<T>) => MaybePromise<void>;
+}): {
+    form: import("@ariakit/react").FormStore<T>;
+    submitName: string;
+    op: Success<R> | Failure<string> | null;
+};
+export {};

package/dist/use-form.js

@@ -0,0 +1,33 @@
+import { useFormStore } from "@ariakit/react";
+import { Failure, Success } from "@indietabletop/appkit/async-op";
+import { useState } from "react";
+export function useForm(props) {
+    const submitName = "submit";
+    const [op, setOp] = useState(null);
+    const form = useFormStore({
+        defaultValues: props.defaultValues,
+    });
+    form.useSubmit(async (state) => {
+        const submitOp = await props.onSubmit(state);
+        if (submitOp.isFailure) {
+            form.setError(submitName, submitOp.failure);
+        }
+        if (submitOp.isSuccess) {
+            await props.onSuccess?.(submitOp.value, state);
+        }
+        setOp(submitOp);
+    });
+    form.useValidate((state) => {
+        if (props.validate) {
+            const entries = Object.entries(props.validate);
+            for (const [key, validate] of entries) {
+                const value = state.values[key];
+                const message = validate(value);
+                if (message) {
+                    form.setError(key, message);
+                }
+            }
+        }
+    });
+    return { form, submitName, op };
+}

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "3.1.0",
+  "version": "3.2.0-1",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",
   "scripts": {
-    "release": "npm run build && np",
+    "release": "np",
     "build": "tsc",
-    "test": "vitest"
+    "dev": "tsc --watch",
+    "test": "vitest",
+    "prepare": "npm run build"
   },
   "exports": {
     ".": "./dist/index.js",
@@ -29,6 +31,9 @@
     "vitest": "^3.0.5"
   },
   "dependencies": {
+    "@ariakit/react": "^0.4.17",
+    "@vanilla-extract/css": "^1.17.2",
+    "@vanilla-extract/dynamic": "^2.1.3",
     "superstruct": "^2.0.2"
   }
 }

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",
-                },
-            },
-        };
-    };
-}