@indietabletop/appkit 7.0.0-rc.0 → 7.0.0-rc.2

package/lib/AppConfig/formatters.tsx

@@ -15,6 +15,8 @@ export function createFormatters(locale: EnglishLocale) {
 
   const dateTimeFmt = new Intl.DateTimeFormat(locale);
 
+  const dateFmt = new Intl.DateTimeFormat(locale, { dateStyle: "long" });
+
   const conjunctionFmt = new Intl.ListFormat(locale, {
     style: "long",
     type: "conjunction",
@@ -33,6 +35,9 @@ export function createFormatters(locale: EnglishLocale) {
     dateTime(date: Date | string | number) {
       return dateTimeFmt.format(new Date(date));
     },
+    date(date: Date | string | number) {
+      return dateFmt.format(new Date(date));
+    },
     conjunction(items: string[]) {
       return conjunctionFmt.format(items);
     },

package/lib/ListView/ListView.stories.tsx

@@ -0,0 +1,36 @@
+import preview from "../../.storybook/preview.tsx";
+import { ListItem, ListView } from "./ListView.tsx";
+
+const meta = preview.meta({
+  title: "Components/ListView",
+  component: ListView,
+});
+
+export const Default = meta.story({
+  args: {
+    children: (
+      <>
+        <ListItem heading="Item 1" summary="Summary for item 1" />
+        <ListItem heading="Item 2" summary="Summary for item 2" type="Type" />
+        <ListItem
+          heading="Item 2"
+          summary="Summary for item 2"
+          type="Type"
+          aside={
+            <svg width="40" height="40" viewBox="0 0 40 40">
+              <rect width="40" height="40" fill="rebeccapurple" />
+              <circle cx="20" cy="20" r="10" fill="white" />
+            </svg>
+          }
+        />
+      </>
+    ),
+    fallback: "Empty",
+  },
+});
+
+export const Empty = meta.story({
+  args: {
+    fallback: "This list is empty",
+  },
+});

package/lib/ListView/ListView.tsx

@@ -0,0 +1,80 @@
+import { type ReactElement, type ReactNode, cloneElement } from "react";
+import { cx } from "../class-names.ts";
+import { MiddotSeparated } from "../MiddotSeparated/MiddotSeparated.tsx";
+import { item, list } from "./style.css.ts";
+
+export { listViewTheme } from "./style.css.ts";
+
+export function ListItemContainer(props: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  return <li {...cx(props, item.container)}>{props.children}</li>;
+}
+
+export function ListItemContent(props: {
+  children?: ReactNode;
+  render?: ReactElement;
+  className?: string;
+}) {
+  const element = props.render ?? <div />;
+  return cloneElement(element, cx(props, item.content), props.children);
+}
+
+export function ListItemHeading(props: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  return <div {...cx(props, item.heading)}>{props.children}</div>;
+}
+
+export function ListItemSummary(props: {
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <MiddotSeparated {...cx(props, item.summary)}>
+      {props.children}
+    </MiddotSeparated>
+  );
+}
+
+export function ListItem(props: {
+  heading: string;
+  type?: string;
+  summary: ReactNode;
+  render?: ReactElement;
+  aside?: ReactNode;
+}) {
+  const { render, heading, type, summary, aside } = props;
+
+  return (
+    <ListItemContainer>
+      <ListItemContent render={render}>
+        <ListItemHeading>{heading}</ListItemHeading>
+
+        <ListItemSummary>
+          {type && <em>{type}</em>}
+          {summary}
+        </ListItemSummary>
+      </ListItemContent>
+
+      {aside}
+    </ListItemContainer>
+  );
+}
+
+export function ListView(props: {
+  children?: ReactNode;
+  fallback?: ReactNode;
+  className?: string;
+}) {
+  const { children, fallback } = props;
+
+  return (
+    <>
+      <ul {...cx(props, list.container)}>{children}</ul>
+      <div className={list.empty}>{fallback}</div>
+    </>
+  );
+}

package/lib/ListView/style.css.ts

@@ -0,0 +1,90 @@
+import { createThemeContract, fallbackVar, style } from "@vanilla-extract/css";
+import { appkit } from "../layers.css.ts";
+
+export const listViewTheme = createThemeContract({
+  headingFont: null,
+  headingSize: null,
+  summaryFont: null,
+  summarySize: null,
+  blockSpace: null,
+  inlineSpace: null,
+});
+
+export const item = {
+  container: style({
+    "@layer": {
+      [appkit]: {
+        display: "flex",
+        gap: fallbackVar(listViewTheme.inlineSpace, "1rem"),
+      },
+    },
+  }),
+
+  content: style({
+    "@layer": {
+      [appkit]: {
+        flexGrow: 1,
+      },
+    },
+  }),
+
+  heading: style({
+    "@layer": {
+      [appkit]: {
+        fontFamily: listViewTheme.headingFont,
+        fontSize: fallbackVar(listViewTheme.headingSize, "1.25rem"),
+        lineHeight: "1lh",
+      },
+    },
+  }),
+
+  summary: style({
+    "@layer": {
+      [appkit]: {
+        fontFamily: listViewTheme.summaryFont,
+        fontSize: fallbackVar(listViewTheme.summarySize, "1rem"),
+        marginBlockStart: "0.5em",
+        lineHeight: 1.25,
+
+        ":empty": {
+          display: "none",
+        },
+      },
+    },
+  }),
+};
+
+const listContainerHook = style({});
+
+export const list = {
+  container: style([
+    listContainerHook,
+    {
+      "@layer": {
+        [appkit]: {
+          display: "flex",
+          flexDirection: "column",
+          gap: fallbackVar(listViewTheme.blockSpace, "1.5rem"),
+
+          ":empty": {
+            display: "none",
+          },
+        },
+      },
+    },
+  ]),
+
+  empty: style({
+    "@layer": {
+      [appkit]: {
+        display: "none",
+
+        selectors: {
+          [`${listContainerHook}:empty + &`]: {
+            display: "initial",
+          },
+        },
+      },
+    },
+  }),
+};

package/lib/RichText/RichText.tsx

@@ -0,0 +1,55 @@
+import { useLocation } from "wouter";
+import { cx } from "../class-names.ts";
+import type { TrustedHtml } from "../types.ts";
+import { content } from "./style.css.ts";
+
+// export { richTextTheme } from "./style.css.ts";
+
+export function RichText(props: {
+  trustedHtml: TrustedHtml;
+  className?: string;
+}) {
+  const [_, navigate] = useLocation();
+
+  return (
+    <div
+      {...cx(props, content)}
+      dangerouslySetInnerHTML={{ __html: props.trustedHtml }}
+      onClick={(event) => {
+        if (!(event.target instanceof HTMLElement)) {
+          return;
+        }
+
+        const anchor = event.target.closest("a");
+        if (!anchor) {
+          return;
+        }
+
+        // The actual value in the HTML
+        const href = anchor.getAttribute("href");
+        if (!href) {
+          return;
+        }
+
+        if (href.startsWith("#")) {
+          return;
+        }
+
+        if (href.startsWith("/")) {
+          event.preventDefault();
+          event.stopPropagation();
+          navigate(`~${href}`);
+          return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        const tempLink = document.createElement("a");
+        tempLink.href = anchor.href;
+        tempLink.target = "_blank";
+        tempLink.rel = "noopener noreferrer";
+        tempLink.click();
+      }}
+    />
+  );
+}

package/lib/RichText/style.css.ts

@@ -0,0 +1,147 @@
+import { createThemeContract, globalStyle, style } from "@vanilla-extract/css";
+import { Hover, MinWidth } from "../media.ts";
+
+export const richTextTheme = createThemeContract({
+  headingFont: null,
+  bodyFont: null,
+  emphasisFont: null,
+});
+
+export const content = style({
+  fontFamily: richTextTheme.bodyFont,
+});
+
+globalStyle(`${content} > :last-child`, {
+  marginBlockEnd: "0",
+});
+
+globalStyle(`${content} > :first-child`, {
+  marginBlockStart: "0",
+});
+
+globalStyle(`${content} em`, {
+  fontFamily: richTextTheme.emphasisFont,
+  textTransform: "lowercase",
+});
+
+globalStyle(`${content} :is(h1, h2, h3, h4, h5, h6)`, {
+  fontFamily: richTextTheme.headingFont,
+  lineHeight: 1.25,
+  fontWeight: 600,
+});
+
+globalStyle(`${content} h2`, {
+  fontSize: "1.75rem",
+  marginBlockStart: "1lh",
+  marginBlockEnd: "0.5lh",
+});
+
+globalStyle(`${content} h3`, {
+  fontSize: "1.5rem",
+  marginBlockStart: "1lh",
+  marginBlockEnd: "0.5lh",
+});
+
+globalStyle(`${content} h4`, {
+  fontSize: "1.125rem",
+  marginBlockStart: "1lh",
+  marginBlockEnd: "0.5lh",
+});
+
+globalStyle(`${content} h5`, {
+  fontSize: "1rem",
+  marginBlockStart: "1lh",
+  marginBlockEnd: "0.5lh",
+});
+
+globalStyle(`${content} :is(p, li)`, {
+  fontSize: "1rem",
+  lineHeight: 1.5,
+});
+
+globalStyle(`${content} :is(ul, ol, p)`, {
+  marginBlock: "0.5lh",
+});
+
+globalStyle(`${content} :is(ul, ol)`, {
+  paddingInlineStart: "1.25em",
+});
+
+globalStyle(`${content} ul`, {
+  listStyle: "disc",
+});
+
+globalStyle(`${content} ol`, {
+  listStyle: "decimal",
+});
+
+globalStyle(`${content} hr`, {
+  marginBlock: "2.5lh",
+  borderBlockStart: `1px dashed currentcolor`,
+});
+
+globalStyle(`${content} blockquote`, {
+  marginInlineStart: "0",
+  paddingInlineStart: "1lh",
+  borderInlineStart: `1px dashed currentcolor`,
+});
+
+globalStyle(`${content} a`, {
+  display: "inline",
+  textDecoration: "underline",
+  textDecorationThickness: "1px",
+  textUnderlineOffset: "0.125em",
+  textDecorationColor: "hsl(from currentcolor h s calc(l + 50))",
+  transition: "text-decoration-color 200ms",
+});
+
+globalStyle(`${content} a:hover`, {
+  "@media": {
+    [Hover.HOVER]: {
+      transition: "text-decoration-color 100ms",
+      textDecorationColor: "currentcolor",
+    },
+  },
+});
+
+globalStyle(`${content} img`, {
+  display: "block",
+  maxInlineSize: "100%",
+  marginBlock: "1lh",
+});
+
+globalStyle(`${content} img[src *= "rounded"]`, {
+  borderRadius: "0.25rem",
+});
+
+globalStyle(`${content} img[src*="float"]`, {
+  "@media": {
+    [MinWidth.MEDIUM]: {
+      margin: "0 0 1lh 1lh",
+      float: "inline-end",
+      maxInlineSize: "50%",
+    },
+  },
+});
+
+globalStyle(`${content} img[src*="rotate"]`, {
+  "@media": {
+    [MinWidth.MEDIUM]: {
+      rotate: "3deg",
+    },
+  },
+});
+
+globalStyle(`${content} code`, {
+  wordBreak: "break-word",
+});
+
+globalStyle(`${content} [src $= "?icon"]`, {
+  position: "relative",
+  display: "inline-block",
+  backgroundColor: "white",
+  width: "1.25em",
+  borderRadius: "0.15em",
+  border: "1px solid #e2e2e2",
+  marginBlock: "-0.25em",
+});

package/lib/account/JoinCard.tsx

@@ -1,6 +1,6 @@
 import { Form, useStoreState } from "@ariakit/react";
 import { type Dispatch, type SetStateAction, useState } from "react";
-import { Link } from "wouter";
+import { Link, useSearchParams } from "wouter";
 import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
 import { cx } from "../class-names.ts";
 import { interactiveText } from "../common.css.ts";
@@ -38,6 +38,7 @@ type InitialStepProps = {
 };
 
 function InitialStep(props: InitialStepProps) {
+  const [params] = useSearchParams();
   const { client, placeholders, hrefs } = useAppConfig();
   const { defaultValues, setStep } = props;
 
@@ -142,7 +143,10 @@ function InitialStep(props: InitialStepProps) {
             {"Have an existing account? "}
             <Link
               {...cx(interactiveText)}
-              href={hrefs.login()}
+              href={hrefs.login({
+                redirectTo: params.get("redirectTo") ?? undefined,
+                backTo: params.get("backTo") ?? undefined,
+              })}
               state={{ emailValue }}
             >
               Log in

package/lib/account/LoginView.tsx

@@ -1,6 +1,6 @@
 import { Button, Form, useStoreState } from "@ariakit/react";
 import type { ReactNode } from "react";
-import { Link, useLocation } from "wouter";
+import { Link, useLocation, useSearchParams } from "wouter";
 import { useAppConfig } from "../AppConfig/AppConfig.tsx";
 import { interactiveText } from "../common.css.ts";
 import { getSubmitFailureMessage } from "../failureMessages.ts";
@@ -31,6 +31,7 @@ export function LoginView(props: {
   description: ReactNode;
   reload: () => void;
 }) {
+  const [params] = useSearchParams();
   const { currentUser, defaultValues, description, onLogin, reload } = props;
   const { placeholders, client, hrefs } = useAppConfig();
   const { logout } = useAppActions();
@@ -73,7 +74,7 @@ export function LoginView(props: {
       <LetterheadHeader>
         <LetterheadHeading>Log in</LetterheadHeading>
 
-        {localUserPresent ? (
+        {localUserPresent ?
           <>
             <LetterheadParagraph>
               Your session has expired. Please log into Indie Tabletop Club
@@ -94,12 +95,14 @@ export function LoginView(props: {
               {" first."}
             </LetterheadParagraph>
           </>
-        ) : (
-          <LetterheadParagraph>
+        : <LetterheadParagraph>
             {description}
             {" Do not have an account? "}
             <Link
-              href={hrefs.join()}
+              href={hrefs.join({
+                redirectTo: params.get("redirectTo") ?? undefined,
+                backTo: params.get("backTo") ?? undefined,
+              })}
               className={interactiveText}
               state={{ emailValue }}
             >
@@ -107,7 +110,7 @@ export function LoginView(props: {
             </Link>
             {"."}
           </LetterheadParagraph>
-        )}
+        }
       </LetterheadHeader>
 
       <Form store={form} resetOnSubmit={false}>

package/lib/async-op.ts

@@ -242,9 +242,11 @@ 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;
+    -readonly [Index in keyof Ops]: Ops[Index] extends (
+      AsyncOp<infer S, unknown>
+    ) ?
+      S
+    : never;
   },
   Ops[number] extends AsyncOp<unknown, infer F> ? F : never
 > {
@@ -284,3 +286,13 @@ export function fromTryCatch<T>(callback: () => T) {
     return new Failure(cause);
   }
 }
+
+export async function fromPromise<T>(
+  callback: () => Promise<T>,
+): Promise<Success<T> | Failure<unknown>> {
+  try {
+    return new Success(await callback());
+  } catch (cause) {
+    return new Failure(cause);
+  }
+}

package/lib/createStrictContext.ts

@@ -1,12 +1,12 @@
 import { createContext, use } from "react";
 
-export function createStrictContext<T>() {
+export function createStrictContext<T>(debugName: string = "Value") {
   const Context = createContext<T | null>(null);
 
   const useStrictContext = () => {
     const value = use(Context);
     if (!value) {
-      throw new Error(`Value not found in context.`);
+      throw new Error(`${debugName} not found in context.`);
     }
     return value;
   };

package/lib/fathom.ts

@@ -0,0 +1,15 @@
+declare global {
+  interface Window {
+    fathom?: { trackEvent: (name: string) => void };
+  }
+}
+
+export function trackEvent(event: string) {
+  if (window.fathom) {
+    window.fathom.trackEvent(event);
+  } else {
+    console.warn(
+      `Attempting to track event ${event}, but Fathom not installed.`,
+    );
+  }
+}

package/lib/hrefs.ts

@@ -1,10 +1,28 @@
 import type { LinkUtmParams, createUtm } from "./utm.ts";
 
+export function withParams(path: string, params?: Record<string, string>) {
+  if (!params) {
+    return path;
+  }
+
+  return `${path}?${new URLSearchParams(params)}`;
+}
+
+export type AccountParams = {
+  redirectTo?: string;
+  backTo?: string;
+};
+
+export type BuyParams = {
+  note?: "continuePurchase" | "loginNeeded";
+};
+
 type InputAppHrefs = {
-  login: () => string;
-  password: () => string;
-  join: () => string;
-  dashboard: () => string;
+  login?: (params?: AccountParams) => string;
+  join?: (params?: AccountParams) => string;
+  password?: () => string;
+
+  dashboard?: () => string;
   account: () => string;
 
   // These are usually external links to the root domain, so we want to be
@@ -33,6 +51,12 @@ export function createHrefs<T extends InputAppHrefs>(params: {
   const { utm, hrefs } = params;
 
   return {
+    dashboard: () => `~/`,
+
+    login: (params?: AccountParams) => withParams(`~/login`, params),
+    join: (params?: AccountParams) => withParams(`~/join`, params),
+    password: () => `~/password`,
+
     terms: (linkUtm?: LinkUtmParams) =>
       `https://indietabletop.club/terms?${utm(linkUtm)}`,
     privacy: (linkUtm?: LinkUtmParams) =>

package/lib/index.ts

@@ -17,11 +17,13 @@ export * from "./IndieTabletopClubLogo.tsx";
 export * from "./IndieTabletopClubSymbol.tsx";
 export * from "./Letterhead/index.tsx";
 export * from "./LetterheadForm/index.tsx";
+export * from "./ListView/ListView.tsx";
 export * from "./LoadingIndicator.tsx";
 export * from "./MiddotSeparated/MiddotSeparated.tsx";
 export * from "./ModalDialog/index.tsx";
 export * from "./QRCode/QRCode.tsx";
 export * from "./ReleaseInfo/index.tsx";
+export * from "./RichText/RichText.tsx";
 export * from "./SafariCheck/SafariCheck.tsx";
 export * from "./ServiceWorkerHandler.tsx";
 export * from "./ShareButton/ShareButton.tsx";
@@ -40,10 +42,13 @@ export * from "./use-media-query.ts";
 export * from "./use-reverting-state.ts";
 export * from "./use-scroll-restoration.ts";
 export * from "./useEnsureValue.ts";
+export * from "./useFetchJson.tsx";
+export * from "./useGetProductStatus.ts";
 export * from "./useInvokeClient.ts";
 export * from "./useIsVisible.ts";
 
 // Utils
+
 export * from "./append-copy-to-text.ts";
 export * from "./async-op.ts";
 export * from "./caught-value.ts";
@@ -52,6 +57,7 @@ export * from "./client.ts";
 export * from "./copyrightRange.ts";
 export * from "./createSafeStorage.ts";
 export * from "./failureMessages.ts";
+export * from "./fathom.ts";
 export * from "./groupBy.ts";
 export * from "./HistoryState.ts";
 export * from "./hrefs.ts";

package/lib/layers.css.ts

@@ -0,0 +1,3 @@
+import { layer } from "@vanilla-extract/css";
+
+export const appkit = layer();

package/lib/omitUndefinedKeys.ts

@@ -0,0 +1,9 @@
+/**
+ * Given an object with keys that might contain undefined values, returns a new
+ * object only with keys that are not undefined.
+ */
+export function omitUndefinedKeys<T>(record: Record<string, T | undefined>) {
+  return Object.fromEntries(
+    Object.entries(record).filter(([_, v]) => v !== undefined),
+  ) as Record<string, T>;
+}

package/lib/store/index.tsx

@@ -1,6 +1,6 @@
 import type { UserGameData } from "@indietabletop/types";
 import { useActorRef, useSelector } from "@xstate/react";
-import { createContext, useMemo, type ReactNode } from "react";
+import { useMemo, type ReactNode } from "react";
 import { Actor, fromCallback, fromPromise } from "xstate";
 import { useAppConfig } from "../AppConfig/AppConfig.tsx";
 import { Failure, Success } from "../async-op.ts";
@@ -25,9 +25,7 @@ type AppActor = Actor<AppMachine>;
 export const [AppMachineContext, useAppMachineContext] = createStrictContext<{
   actorRef: AppActor;
   actions: AppActions;
-}>();
-
-export const AppActionsContext = createContext<null | AppActions>(null);
+}>("App Machine");
 
 export function useCurrentUser() {
   const { actorRef } = useAppMachineContext();

package/lib/useFetchJson.tsx

@@ -0,0 +1,52 @@
+import useSWR, { type SWRConfiguration } from "swr";
+import { Failure, fromPromise, Success } from "./async-op.ts";
+import { swrResponseToResult } from "./result/swr.ts";
+import type { FailurePayload } from "./types.ts";
+
+export type DocContentTypeMismatch = {
+  type: "DOC_CONTENT_TYPE_MISMATCH";
+};
+
+type FetchJsonResult<T> =
+  | Success<T>
+  | Failure<FailurePayload | DocContentTypeMismatch>;
+
+export async function fetchJson<T>(url: string): Promise<FetchJsonResult<T>> {
+  const result = await fromPromise(() => fetch(url));
+
+  if (result.isFailure) {
+    return new Failure({ type: "NETWORK_ERROR" });
+  }
+
+  const { value: response } = result;
+  if (!response.ok) {
+    return new Failure({ type: "API_ERROR", code: response.status });
+  }
+
+  // This can happen due to Netlify rewrites serving index.html in case the
+  // requested doc file is not found.
+  if (response.headers.get("Content-Type") !== "application/json") {
+    return new Failure({ type: "DOC_CONTENT_TYPE_MISMATCH" });
+  }
+
+  const parsed = await fromPromise(() => response.json());
+  if (parsed.isFailure) {
+    return new Failure({ type: "UNKNOWN_ERROR" });
+  }
+
+  return parsed;
+}
+
+export function useFetchJson<T = unknown>(
+  url: string,
+  config?: SWRConfiguration,
+) {
+  return useSWR<FetchJsonResult<T>>(url, fetchJson, config);
+}
+
+export function useFetchJsonResult<T = unknown>(
+  url: string,
+  config?: SWRConfiguration,
+) {
+  return swrResponseToResult(useFetchJson<T>(url, config));
+}

package/lib/useGetProductStatus.ts

@@ -0,0 +1,56 @@
+import { useCallback } from "react";
+import useSWR from "swr";
+import { useClient } from "./AppConfig/AppConfig.tsx";
+import { Failure, Success } from "./async-op.ts";
+import { swrResponseToResult } from "./result/swr.ts";
+import { useCurrentUser } from "./store/index.tsx";
+
+function useGetOwnedProduct(productCode: string) {
+  const client = useClient();
+
+  const swr = useSWR(
+    `getOwnedProduct:${productCode}`,
+    useCallback(() => {
+      return client.getOwnedProduct(productCode);
+    }, [productCode]),
+  );
+
+  return swrResponseToResult(swr);
+}
+
+export function useGetProductStatus(productCode: string) {
+  const result = useGetOwnedProduct(productCode);
+  const currentUser = useCurrentUser();
+
+  if (result.isPending) {
+    return result;
+  }
+
+  if (result.isFailure) {
+    const { failure } = result;
+
+    if (failure.type === "API_ERROR") {
+      // The no currentUser case is possible in case the user is logged into ITC
+      // via a domain-wide cookie, but they have not yet logged in this app.
+      if (failure.code === 401 || !currentUser) {
+        return new Success({ type: "AUTHENTICATE" as const });
+      }
+
+      if (failure.code === 403) {
+        return new Success({ type: "PURCHASE" as const });
+      }
+    }
+
+    // Other errors should be handled by the default error handling
+    return result;
+  }
+
+  // This shouldn't happen in practice, as this particular endpoint errors out
+  // if a product link fails to generate.
+  const { downloadUrl } = result.value;
+  if (!downloadUrl) {
+    return new Failure({ type: "UNKNOWN_ERROR" as const });
+  }
+
+  return new Success({ type: "DOWNLOAD" as const, downloadUrl });
+}

package/lib/utm.ts

@@ -1,12 +1,4 @@
-/**
- * Given an object with keys that might contain undefined values, returns a new
- * object only with keys that are not undefined.
- */
-function omitUndefinedKeys<T>(record: Record<string, T | undefined>) {
-  return Object.fromEntries(
-    Object.entries(record).filter(([_, v]) => v !== undefined),
-  ) as Record<string, T>;
-}
+import { omitUndefinedKeys } from "./omitUndefinedKeys.ts";
 
 /**
  * Full UTM configuration object.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "7.0.0-rc.0",
+  "version": "7.0.0-rc.2",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",