@indietabletop/appkit 3.2.0-1 → 3.2.0-3

package/lib/ExternalLink.tsx

@@ -0,0 +1,10 @@
+import type { AnchorHTMLAttributes } from "react";
+
+export type ExternalLinkProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  "rel" | "target"
+>;
+
+export function ExternalLink(props: ExternalLinkProps) {
+  return <a {...props} target="_blank" rel="noreferrer noopener" />;
+}

package/lib/FormSubmitButton.tsx

@@ -0,0 +1,48 @@
+import {
+  type FormSubmitProps,
+  FormSubmit,
+  useFormContext,
+  useStoreState,
+} from "@ariakit/react";
+import type { ReactNode } from "react";
+import { fadeIn } from "./animations.css.ts";
+
+export type FormSubmitButtonProps = FormSubmitProps & {
+  children: ReactNode;
+  loading: ReactNode;
+};
+
+export function FormSubmitButton(props: FormSubmitButtonProps) {
+  const { children, className, style, loading, ...submitProps } = props;
+  const form = useFormContext();
+  const isSubmitting = useStoreState(form, (s) => s?.submitting);
+
+  return (
+    <FormSubmit
+      {...submitProps}
+      className={className}
+      style={{ position: "relative", ...style }}
+    >
+      <span
+        style={{ opacity: isSubmitting ? 0 : 1, transition: "200ms opacity" }}
+      >
+        {children}
+      </span>
+
+      {isSubmitting && (
+        <div
+          style={{
+            display: "flex",
+            position: "absolute",
+            inset: "0",
+            alignItems: "center",
+            justifyContent: "center",
+            animation: `${fadeIn} 200ms 200ms both`,
+          }}
+        >
+          {loading}
+        </div>
+      )}
+    </FormSubmit>
+  );
+}

package/lib/FullscreenDismissBlocker.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from "react";
+
+function preventDefaultEscHandling(event: KeyboardEvent) {
+  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/lib/IndieTabletopClubLogo.tsx

@@ -0,0 +1,44 @@
+import type { SVGAttributes } from "react";
+
+type IndieTabletopClubLogoProps = Omit<
+  SVGAttributes<SVGElement>,
+  "width" | "height" | "viewBox"
+> & {
+  textColor?: string;
+  symbolColor?: string;
+};
+
+export function IndieTabletopClubLogo(props: IndieTabletopClubLogoProps) {
+  const { textColor = "#161615", symbolColor = "#FF5937", ...svgProps } = props;
+
+  // prettier-ignore
+  return (
+    <svg {...svgProps} width="200px" height="13px" viewBox="0 0 200 13">
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g transform="translate(-720, -746)" fillRule="nonzero">
+          <g transform="translate(720, 746)">
+            <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" />
+            <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" />
+            <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" />
+            <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" />
+            <polygon fill={textColor} points="0 0.242755671 3.54075462 0.159047705 3.54075462 12.7572036 0 12.840993" />
+            <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" />
+            <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" />
+            <polygon fill={textColor} points="31.090842 0.242755671 34.6316069 0.159047705 34.6316069 12.7572036 31.090842 12.840993" />
+            <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" />
+            <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" />
+            <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" />
+            <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" />
+            <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" />
+            <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" />
+            <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" />
+            <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" />
+            <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" />
+
+            <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" />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}

package/lib/IndieTabletopClubSymbol.tsx

@@ -0,0 +1,37 @@
+import type { SVGAttributes } from "react";
+
+type IndieTabletopClubSymbolProps = Omit<
+  SVGAttributes<SVGElement>,
+  "width" | "height" | "viewBox"
+> & {
+  backgroundColor?: string;
+  symbolColor?: string;
+};
+
+export function IndieTabletopClubSymbol(props: IndieTabletopClubSymbolProps) {
+  const {
+    symbolColor = "#FF5937",
+    backgroundColor = "#F0F0F0",
+    ...svgProps
+  } = props;
+
+  return (
+    <svg {...svgProps} width="65px" height="65px" viewBox="0 0 65 65">
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <rect
+          fill={backgroundColor}
+          x="0"
+          y="0"
+          width="65"
+          height="65"
+          rx="11"
+        />
+        <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"
+        />
+      </g>
+    </svg>
+  );
+}

package/lib/Letterhead.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import { IndieTabletopClubSymbol } from "./IndieTabletopClubSymbol.tsx";
+import { letterhead } from "./internal.css.ts";
+import { LetterheadFooter } from "./LetterheadFooter.tsx";
+
+export type LetterheadProps = {
+  headerIcon?: boolean;
+  children: ReactNode;
+};
+
+export function Letterhead(props: LetterheadProps) {
+  const { children, headerIcon = true } = props;
+
+  return (
+    <div className={letterhead}>
+      {headerIcon && (
+        <IndieTabletopClubSymbol
+          style={{
+            marginBlock: "-1rem 1rem",
+            marginInline: "auto",
+            display: "block",
+            inlineSize: "2.5rem",
+            blockSize: "2.5rem",
+          }}
+        />
+      )}
+
+      {children}
+
+      <LetterheadFooter />
+    </div>
+  );
+}

package/lib/LetterheadFooter.tsx

@@ -0,0 +1,36 @@
+import { interactiveText } from "./common.css.ts";
+import { ExternalLink } from "./ExternalLink.tsx";
+import { IndieTabletopClubLogo } from "./IndieTabletopClubLogo.tsx";
+
+export function LetterheadFooter() {
+  return (
+    <div
+      style={{
+        textAlign: "center",
+        paddingBlockStart: "2rem",
+        borderBlockStart: "1px solid #ececec",
+        marginBlockStart: "3rem",
+      }}
+    >
+      <IndieTabletopClubLogo style={{ margin: "0 auto 1.125rem" }} />
+      <p
+        style={{
+          margin: "0 auto",
+          maxInlineSize: "25rem",
+          fontSize: "0.875rem",
+          lineHeight: "1.25rem",
+        }}
+      >
+        Indie Tabletop Club supports independent game creators with high‑quality
+        digital tools.{" "}
+        <ExternalLink
+          href="https://indietabletop.club"
+          className={interactiveText}
+        >
+          Learn more
+        </ExternalLink>
+        .
+      </p>
+    </div>
+  );
+}

package/lib/LoadingIndicator.tsx

@@ -0,0 +1,39 @@
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { animationDelay, dot } from "./internal.css.ts";
+
+export function LoadingIndicator(props: { className?: string }) {
+  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 (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      width={width}
+      height={height}
+      className={props.className}
+    >
+      <g stroke="none" fill="inherit">
+        {Array.from({ length: 3 }, (_, index) => {
+          const delay = `${initialDelay + interBounceDelay * index}ms`;
+
+          return (
+            <circle
+              key={index}
+              cx={radius * (index + 1) + gap * index}
+              cy={cy}
+              r={radius}
+              className={dot}
+              style={assignInlineVars({ [animationDelay]: delay })}
+            />
+          );
+        })}
+      </g>
+    </svg>
+  );
+}

package/lib/ServiceWorkerHandler.tsx

@@ -0,0 +1,53 @@
+import { type ReactNode, 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: {
+  children: ReactNode;
+  path: string;
+}) {
+  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 <>{props.children}</>;
+}

package/lib/animations.css.ts

@@ -0,0 +1,17 @@
+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/lib/append-copy-to-text.ts

@@ -0,0 +1,35 @@
+/**
+ * Appends " (Copy)" to the end of the input string if it doesn't already end
+ * with " (Copy)", otherwise it appends a number after "Copy", incrementing it
+ * if necessary.
+ */
+export function appendCopyToText(input: string): string {
+  const regex = /^(?<value>.*) \(Copy(?: (?<count>\d+))?\)$/;
+  const match = input.match(regex);
+
+  // If there isn't a match, we directly append to the input.
+  if (!match) {
+    return `${input.trim()} (Copy)`;
+  }
+
+  const { value, count } = match.groups ?? {};
+
+  // If `count` capturing group is not present, it means that the input ends
+  // with the copy suffix, but it doesn't contain count.
+  const nextCount = !count ? 2 : parseInt(count, 10) + 1;
+
+  return `${value.trim()} (Copy ${nextCount})`;
+}
+
+/**
+ * Works like {@link appendCopyToText}, but ignores empty strings.
+ */
+export function maybeAppendCopyToText(input: string) {
+  // If input is falsy (i.e. empty string) then we don't want to append
+  // anything to it.
+  if (!input) {
+    return "";
+  }
+
+  return appendCopyToText(input);
+}

package/lib/async-op.ts

@@ -0,0 +1,246 @@
+type Falsy = null | undefined | false | 0 | 0n | "";
+
+type Truthy<T> = Exclude<T, Falsy>;
+
+interface Operation<SuccessValue, FailureValue> {
+  readonly type: "SUCCESS" | "FAILURE" | "PENDING";
+  readonly isPending: boolean;
+  readonly isSuccess: boolean;
+  readonly isFailure: boolean;
+
+  val: SuccessValue | FailureValue | null;
+
+  valueOrNull(): SuccessValue | null;
+  valueOrThrow(): SuccessValue;
+  hasTruthyValue(): boolean;
+  failureValueOrNull(): FailureValue | null;
+  failureValueOrThrow(): FailureValue;
+
+  flatMap<T extends AsyncOp<unknown, unknown>>(
+    mappingFn: (value: SuccessValue) => T,
+  ): T | Failure<FailureValue> | Pending;
+
+  mapSuccess<MappedSuccess>(
+    mappingFn: (value: SuccessValue) => MappedSuccess,
+  ): Operation<MappedSuccess, FailureValue>;
+
+  mapFailure<MappedFailure>(
+    mappingFn: (value: FailureValue) => MappedFailure,
+  ): Operation<SuccessValue, MappedFailure>;
+
+  unpack<S, F, P>(
+    mapS: (value: SuccessValue) => S,
+    mapF: (failure: FailureValue) => F,
+    mapP: () => P,
+  ): S | F | P;
+}
+
+export class Pending implements Operation<never, never> {
+  readonly type = "PENDING" as const;
+  readonly isPending = true as const;
+  readonly isSuccess = false as const;
+  readonly isFailure = false as const;
+
+  val = null;
+
+  valueOrNull(): null {
+    return null;
+  }
+
+  valueOrThrow(): never {
+    throw new Error(
+      `AsyncOp value was accessed but the op is in Pending state.`,
+    );
+  }
+
+  hasTruthyValue(): false {
+    return false;
+  }
+
+  failureValueOrNull(): null {
+    return null;
+  }
+
+  failureValueOrThrow(): never {
+    throw new Error(
+      `AsyncOp failure value was accessed but the op is in Pending state.`,
+    );
+  }
+
+  flatMap() {
+    return new Pending();
+  }
+
+  mapSuccess() {
+    return new Pending();
+  }
+
+  mapFailure() {
+    return new Pending();
+  }
+
+  unpack<S, F, P>(
+    _mapS: (value: never) => S,
+    _mapF: (failure: never) => F,
+    mapP: () => P,
+  ): S | F | P {
+    return mapP();
+  }
+}
+
+export class Success<SuccessValue> implements Operation<SuccessValue, never> {
+  readonly type = "SUCCESS" as const;
+  readonly isPending = false as const;
+  readonly isSuccess = true as const;
+  readonly isFailure = false as const;
+  readonly value: SuccessValue;
+  readonly val: SuccessValue;
+
+  constructor(value: SuccessValue) {
+    this.value = value;
+    this.val = value;
+  }
+
+  valueOrNull(): SuccessValue {
+    return this.value;
+  }
+
+  valueOrThrow(): SuccessValue {
+    return this.value;
+  }
+
+  hasTruthyValue(): this is Success<Truthy<SuccessValue>> {
+    return !!this.value;
+  }
+
+  failureValueOrNull(): null {
+    return null;
+  }
+
+  failureValueOrThrow(): never {
+    throw new Error(
+      `AsyncOp failure value was accessed but the op is in Success state.`,
+    );
+  }
+
+  flatMap<T extends AsyncOp<unknown, unknown>>(
+    mappingFn: (value: SuccessValue) => T,
+  ) {
+    return mappingFn(this.value);
+  }
+
+  mapSuccess<MappedValue>(mappingFn: (value: SuccessValue) => MappedValue) {
+    return new Success(mappingFn(this.value));
+  }
+
+  mapFailure() {
+    return new Success(this.value);
+  }
+
+  unpack<S, F, P>(
+    mapS: (value: SuccessValue) => S,
+    _mapF: (failure: never) => F,
+    _mapP: () => P,
+  ): S | F | P {
+    return mapS(this.value);
+  }
+}
+
+export class Failure<FailureValue> implements Operation<never, FailureValue> {
+  readonly type = "FAILURE" as const;
+  readonly isPending = false as const;
+  readonly isSuccess = false as const;
+  readonly isFailure = true as const;
+  readonly failure: FailureValue;
+  readonly val: FailureValue;
+
+  constructor(failure: FailureValue) {
+    this.failure = failure;
+    this.val = failure;
+  }
+
+  valueOrNull(): null {
+    return null;
+  }
+
+  valueOrThrow(): never {
+    throw new Error(
+      `AsyncOp value was accessed but the op is in Failure state.`,
+    );
+  }
+
+  hasTruthyValue(): false {
+    return false;
+  }
+
+  failureValueOrNull(): FailureValue {
+    return this.failure;
+  }
+
+  failureValueOrThrow(): FailureValue {
+    return this.failure;
+  }
+
+  flatMap() {
+    return new Failure(this.failure);
+  }
+
+  mapSuccess() {
+    return new Failure(this.failure);
+  }
+
+  mapFailure<MappedFailure>(mappingFn: (value: FailureValue) => MappedFailure) {
+    return new Failure(mappingFn(this.failure));
+  }
+
+  unpack<S, F, P>(
+    _mapS: (value: never) => S,
+    mapF: (failure: FailureValue) => F,
+    _mapP: () => P,
+  ): S | F | P {
+    return mapF(this.failure);
+  }
+}
+
+/**
+ * Folds multiple ops into a single op.
+ *
+ * To return a Success, all ops provided must be a Success. If any Failures are
+ * encountered, will return the first one found.
+ *
+ * If neither of these conditions is true, will return Pending.
+ *
+ * Note that if passed an empty array, will always return a Success (with an
+ * empty array as value). This mimics the semantics of many JS constructs, like
+ * Promise.all or Array.prototype.every.
+ */
+export function fold<Ops extends readonly AsyncOp<unknown, unknown>[] | []>(
+  ops: Ops,
+): AsyncOp<
+  {
+    -readonly [Index in keyof Ops]: Ops[Index] extends AsyncOp<infer S, unknown>
+      ? S
+      : never;
+  },
+  Ops[number] extends AsyncOp<unknown, infer F> ? F : never
+> {
+  // Note that due to the semantics of `every`, if the array provided to `fold`
+  // is empty, the result will be a Success with an empty array.
+  if (ops.every((v) => v.isSuccess)) {
+    return new Success(
+      (ops as Success<unknown>[]).map((op) => op.value),
+    ) as never;
+  }
+
+  const firstFail = ops.find((op) => op.isFailure);
+  if (firstFail) {
+    return firstFail as never;
+  }
+
+  return new Pending() as never;
+}
+
+export type AsyncOp<SuccessValue, FailureValue> =
+  | Pending
+  | Success<SuccessValue>
+  | Failure<FailureValue>;

package/{dist/caught-value.js → lib/caught-value.ts}

@@ -12,12 +12,14 @@
  * if so, returns its message. If a string was caught, it returns that.
  * Otherwise, it returns "Unknown error".
  */
-export function caughtValueToString(value) {
-    if (value instanceof Error) {
-        return value.message;
-    }
-    if (typeof value === "string") {
-        return value;
-    }
-    return "Unknown error.";
+export function caughtValueToString(value: unknown): string {
+  if (value instanceof Error) {
+    return value.message;
+  }
+
+  if (typeof value === "string") {
+    return value;
+  }
+
+  return "Unknown error.";
 }

package/lib/class-names.ts

@@ -0,0 +1,8 @@
+/**
+ * Combines a list of strings into a single string. Falsy values are ignored.
+ */
+export function classNames(
+  ...classNames: (string | false | null | undefined)[]
+) {
+  return classNames.filter((c) => !!c).join(" ");
+}