@indietabletop/appkit 5.5.1 → 6.1.0

package/lib/AppConfig/AppConfig.tsx

@@ -3,7 +3,19 @@ import type { IndieTabletopClient } from "../client.ts";
 import type { AppHrefs } from "../hrefs.ts";
 
 export type AppConfig = {
-  appName: string;
+  app: {
+    /**
+     * The app's name, e.g. Space Gits. Do not include the word App in this
+     * title -- it will be added automatically in places where it's needed.
+     */
+    name: string;
+
+    /**
+     * The URL to the app's icon. This should be a maskable-style icon. In
+     * other words, it should not include its own transparency.
+     */
+    icon: string;
+  };
   isDev: boolean;
   client: IndieTabletopClient;
   hrefs: AppHrefs;

package/lib/Letterhead/style.css.ts

@@ -114,6 +114,7 @@ export const button = recipe({
       borderRadius: "0.5rem",
       padding: "1rem 1.5rem",
       fontSize: "0.875rem",
+      textAlign: "center",
 
       "@media": {
         [Hover.HOVER]: {

package/lib/ModalDialog/style.css.ts

@@ -1,6 +1,7 @@
 import { style } from "@vanilla-extract/css";
 import { recipe } from "@vanilla-extract/recipes";
 import { MinWidth } from "../media.ts";
+import { ZIndex } from "../vars.css.ts";
 
 const scaleTransition = {
   transition: "transform 200ms, opacity 200ms",
@@ -40,7 +41,7 @@ export const dialog = recipe({
   base: {
     position: "fixed",
     inset: 0,
-    zIndex: 100,
+    zIndex: ZIndex.DIALOG,
     margin: "auto",
     overflow: "auto",
     opacity: 0,

package/lib/SafariCheck/SafariCheck.stories.tsx

@@ -0,0 +1,99 @@
+import { http, HttpResponse } from "msw";
+import preview from "../../.storybook/preview.tsx";
+import { sleep } from "../sleep.ts";
+import { SafariCheck } from "./SafariCheck.tsx";
+
+function Content() {
+  return (
+    <div>
+      <h1>Safari Check passed</h1>
+      <button
+        onClick={() => {
+          localStorage.clear();
+          window.location.reload();
+        }}
+      >
+        Clear local storage
+      </button>
+    </div>
+  );
+}
+
+function userAgentResponse(params: { browserName: string }) {
+  return http.get("http://mock.api/ua", async () => {
+    await sleep(1500);
+    return HttpResponse.json({
+      browser: { name: params.browserName },
+      device: params.browserName.includes("Mobile") ? { type: "mobile" } : {},
+    });
+  });
+}
+
+const meta = preview.meta({
+  title: "Components/SafariCheck",
+  component: SafariCheck,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ height: "100svh", display: "grid" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    msw: {
+      handlers: {
+        ua: userAgentResponse({ browserName: "Safari" }),
+      },
+    },
+  },
+});
+
+export const SafariDesktop = meta.story({
+  args: {
+    children: <Content />,
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        ua: userAgentResponse({ browserName: "Safari" }),
+      },
+    },
+  },
+});
+
+export const SafariMobile = meta.story({
+  args: {
+    children: <Content />,
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        ua: userAgentResponse({ browserName: "Safari Mobile" }),
+      },
+    },
+  },
+});
+
+export const OtherBrowser = meta.story({
+  args: {
+    children: <Content />,
+  },
+  parameters: {
+    msw: {
+      handlers: {
+        ua: userAgentResponse({ browserName: "Chrome" }),
+      },
+    },
+  },
+});
+
+/**
+ * The check behaviour has been disabled.
+ */
+export const Disabled = meta.story({
+  args: {
+    children: <Content />,
+    performCheck: false,
+  },
+});

package/lib/SafariCheck/SafariCheck.tsx

@@ -0,0 +1,273 @@
+import { Button, DialogDisclosure, DialogDismiss } from "@ariakit/react";
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { number } from "superstruct";
+import useImmutableSWR from "swr/immutable";
+import { Link } from "wouter";
+import { useAppConfig, useClient } from "../AppConfig/AppConfig.tsx";
+import { Failure, Pending, Success } from "../async-op.ts";
+import { interactiveText } from "../common.css.ts";
+import { createSafeStorage } from "../createSafeStorage.ts";
+import { DialogTrigger } from "../DialogTrigger/index.tsx";
+import {
+  LetterheadFooter,
+  LetterheadHeading,
+  LetterheadParagraph,
+} from "../Letterhead/index.tsx";
+import { button } from "../Letterhead/style.css.ts";
+import { LoadingIndicator } from "../LoadingIndicator.tsx";
+import { ModalDialog } from "../ModalDialog/index.tsx";
+import { swrResponseToResult } from "../result/swr.ts";
+import { useCurrentUser } from "../store/index.tsx";
+import type { FailurePayload } from "../types.ts";
+import { useIsInstalled } from "../use-is-installed.ts";
+import addToDockUrl from "./addToDock.svg";
+import addToHomeScreenUrl from "./addToHomeScreen.svg";
+import safariUrl from "./safari.svg";
+import shareIconUrl from "./shareIcon.svg";
+import * as css from "./style.css.ts";
+
+function InstallAppDialog({ isMobile }: { isMobile?: boolean }) {
+  const config = useAppConfig();
+
+  const shareIcon = <img src={shareIconUrl} alt="" className={css.icon} />;
+  const addIcon = <img src={addToHomeScreenUrl} alt="" className={css.icon} />;
+  const addToDockIcon = <img src={addToDockUrl} alt="" className={css.icon} />;
+
+  const steps = [
+    <>
+      Open the <strong>Share</strong> menu {shareIcon}
+    </>,
+
+    isMobile ? (
+      <>
+        Tap <strong>Add to Home Screen</strong> {addIcon}
+      </>
+    ) : (
+      <>
+        Click <strong>Add to Dock</strong> {addToDockIcon}
+      </>
+    ),
+
+    isMobile ? (
+      <>
+        Tap <strong>Add</strong> in the top right corner
+      </>
+    ) : (
+      <>
+        Click <strong>Add</strong>
+      </>
+    ),
+  ];
+
+  return (
+    <ModalDialog size="small" className={css.dialog}>
+      <img
+        src={config.app.icon}
+        alt=""
+        width="512"
+        height="512"
+        className={css.appIcon}
+      />
+
+      <LetterheadHeading className={css.heading}>
+        Install {config.app.name}
+      </LetterheadHeading>
+
+      <LetterheadParagraph className={css.intro}>
+        To install this app, follow these 3 steps:
+      </LetterheadParagraph>
+
+      <ol className={css.steps}>
+        {steps.map((step, index) => {
+          return (
+            <li className={css.step} key={index}>
+              {step}
+            </li>
+          );
+        })}
+      </ol>
+
+      <div>
+        <DialogDismiss className={interactiveText}>Dismiss</DialogDismiss>
+      </div>
+    </ModalDialog>
+  );
+}
+
+function SafariPrompt(props: { onDismiss: () => void; isMobile?: boolean }) {
+  const { hrefs } = useAppConfig();
+
+  const delete_your_local_data = <strong>delete your local data</strong>;
+
+  const install_the_app = <strong>install the app</strong>;
+
+  const creating_an_account = <strong>creating an account</strong>;
+
+  return (
+    <div className={css.safariPrompt}>
+      <div className={css.safariPromptHeader}>
+        <img
+          src={safariUrl}
+          alt=""
+          width="64"
+          height="64"
+          className={css.safariLogo}
+        />
+
+        <LetterheadHeading className={css.emptyStateHeading}>
+          Heads up Safari users!
+        </LetterheadHeading>
+      </div>
+      <LetterheadParagraph>
+        Safari — unlike other browsers — will {delete_your_local_data} after 7
+        days of inactivity, unless you have installed the app.
+      </LetterheadParagraph>
+      <LetterheadParagraph>
+        To prevent accidental data loss, you can either {install_the_app}, make
+        sure all your data is safely backed up by {creating_an_account}, or use
+        a different browser.
+      </LetterheadParagraph>
+
+      <div className={css.safariPromptActions}>
+        <DialogTrigger>
+          <InstallAppDialog isMobile={props.isMobile} />
+
+          <DialogDisclosure className={button()}>Install App</DialogDisclosure>
+        </DialogTrigger>
+
+        <Link className={button()} href={hrefs.join()}>
+          Create Account
+        </Link>
+      </div>
+
+      <div className={css.safariDismissArea}>
+        <LetterheadParagraph align="center">
+          <Button className={interactiveText} onClick={props.onDismiss}>
+            I don’t mind if my data gets deleted
+          </Button>
+        </LetterheadParagraph>
+      </div>
+
+      <LetterheadFooter />
+    </div>
+  );
+}
+
+function useUserAgent(props: { performFetch: boolean }) {
+  const client = useClient();
+
+  const swr = useImmutableSWR(
+    props.performFetch ? "/ua" : null,
+    useCallback(() => client.userAgent(), []),
+  );
+
+  return swrResponseToResult(swr);
+}
+
+const storage = createSafeStorage({ safariInstallPromptDismissedAt: number() });
+
+function useInstallPromptState() {
+  const [dismissedAt, setState] = useState(() =>
+    storage.getItem("safariInstallPromptDismissedAt"),
+  );
+
+  return {
+    dismissedAt,
+    setDismissed: useCallback(() => {
+      const timestamp = Date.now();
+
+      setState(timestamp);
+      storage.setItem("safariInstallPromptDismissedAt", timestamp);
+    }, []),
+  };
+}
+
+type SafariCheckResult =
+  | Success<{ showPrompt: boolean; isMobile?: boolean }>
+  | Failure<FailurePayload>
+  | Pending;
+
+function useSafariCheck({ performCheck }: { performCheck: boolean }) {
+  const currentUser = useCurrentUser();
+  const isInstalled = useIsInstalled();
+  const { dismissedAt, setDismissed } = useInstallPromptState();
+  const installedOrDismissed = isInstalled || !!dismissedAt;
+  const userAgentResult = useUserAgent({
+    performFetch: performCheck && !currentUser && !installedOrDismissed,
+  });
+
+  const result = useMemo((): SafariCheckResult => {
+    return installedOrDismissed || !performCheck
+      ? // If the safari prompt was previously dismissed, the app is already
+        // installed, or check was disabled explicitly, we skip the prompt.
+        new Success({ showPrompt: false })
+      : // Otherwise, we want to check whether the name includes Safari (could be
+        // Safari or Safari Mobile), and we also report whether this is a mobile
+        // device to allow for more targeted install instructions for the user.
+        userAgentResult.mapSuccess((value) => {
+          return {
+            showPrompt: value.browser?.name?.includes("Safari") ?? false,
+            isMobile: value.device?.type === "mobile",
+          };
+        });
+  }, [installedOrDismissed, userAgentResult, performCheck]);
+
+  return { result, setDismissed };
+}
+
+/**
+ * Checks whether the browser which is running the app is Safari/Safari Mobile
+ * and warns the user that their data might be deleted due to inactivity.
+ *
+ * The warning will be shown if:
+ *
+ * - The check has not been explicitly disabled via `performCheck: false`
+ * - The warning has not been previously dismissed (as reported by localStorage)
+ * - The app is not installed (Safari behaves differently in that case)
+ * - The user is not already logged in (as data will be safely backed up that way)
+ */
+export function SafariCheck(props: {
+  children: ReactNode;
+
+  /**
+   * Optionally opt out of the check.
+   *
+   * This can be useful in cases where, e.g. the user already has some content
+   * in the app and we want to avoid checking the user agent, but it is
+   * impractical to entirely avoid rendering this component.
+   */
+  performCheck?: boolean;
+}) {
+  const { result, setDismissed } = useSafariCheck({
+    performCheck: props.performCheck ?? true,
+  });
+
+  if (result.isPending) {
+    return (
+      <div className={css.container}>
+        <div className={css.compatCheckLoaderContainer}>
+          <LoadingIndicator className={css.indicator} />
+
+          {/* Intentionally not using Letterhead Paragraph to pick up the default
+            font size and style. */}
+          <p className={css.compatCheckLoaderText}>Checking compatibility...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Get the success value. Note that if the UA check is a failure we don't
+  // want to bother the user with any failure messages. In that case, we just
+  // keep rolling as if the showPrompt was false.
+  const value = result.valueOrNull();
+  if (value?.showPrompt) {
+    return (
+      <div className={css.container}>
+        <SafariPrompt onDismiss={setDismissed} isMobile={value.isMobile} />
+      </div>
+    );
+  }
+
+  // We're all good, render children.
+  return <>{props.children}</>;
+}

package/lib/SafariCheck/addToDock.svg

@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_277_21)">
+<rect width="16" height="16" fill="none"/>
+<rect x="1.5" y="3" width="13" height="10" rx="1" stroke="black"/>
+<path d="M2 5H14" stroke="black"/>
+<rect x="3.5" y="9.5" width="9" height="2" rx="0.5" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_277_21">
+<rect width="16" height="16" fill="none"/>
+</clipPath>
+</defs>
+</svg>

package/lib/SafariCheck/addToHomeScreen.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_276_9)">
+<rect width="16" height="16" fill="none"/>
+<rect x="2.5" y="2.5" width="11" height="11" rx="2" stroke="black"/>
+<path d="M5 8H8M8 8H11M8 8V11M8 8V5" stroke="black"/>
+</g>
+<defs>
+<clipPath id="clip0_276_9">
+<rect width="16" height="16" fill="none"/>
+</clipPath>
+</defs>
+</svg>

package/lib/SafariCheck/safari.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="66.165833mm" height="65.803795mm" viewBox="0 0 66.165833 65.803795">
+  <defs>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#06c2e7"/>
+      <stop offset=".25000015" stop-color="#0db8ec"/>
+      <stop offset=".5000003" stop-color="#12aef1"/>
+      <stop offset=".75000012" stop-color="#1f86f9"/>
+      <stop offset="1" stop-color="#107ddd"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#bdbdbd"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+    <linearGradient xlink:href="#a" id="d" x1="412.97501" x2="412.97501" y1="237.60777" y2="59.392235" gradientTransform="translate(206.79018 159.77261) scale(.35154)" gradientUnits="userSpaceOnUse"/>
+    <filter id="f" width="1.0418189" height="1.0446756" x="-.02090938" y="-.0223378" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation=".95767362"/>
+    </filter>
+    <filter id="c" width="1.096" height="1.096" x="-.048" y="-.048" color-interpolation-filters="sRGB">
+      <feGaussianBlur stdDeviation="3.5643107"/>
+    </filter>
+    <radialGradient xlink:href="#b" id="e" cx="413.06128" cy="136.81819" r="82.125351" fx="413.06128" fy="136.81819" gradientTransform="translate(194.54473 155.58044) scale(.38143)" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path d="M502.08277 148.5a89.107765 89.107765 0 0 1-89.10777 89.10777A89.107765 89.107765 0 0 1 323.86724 148.5 89.107765 89.107765 0 0 1 412.975 59.392235 89.107765 89.107765 0 0 1 502.08277 148.5Z" filter="url(#c)" opacity=".52999998" paint-order="markers stroke fill" transform="matrix(.33865 0 0 .3261 -106.76956 -14.47833)"/>
+  <path fill="url(#d)" stroke="#cdcdcd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".09301235" d="M383.29373 211.97671a31.325188 31.325188 0 0 1-31.32519 31.32519 31.325188 31.325188 0 0 1-31.32518-31.32519 31.325188 31.325188 0 0 1 31.32518-31.32519 31.325188 31.325188 0 0 1 31.32519 31.32519z" paint-order="markers stroke fill" transform="translate(-318.88562 -180.59501)"/>
+  <path fill="url(#e)" d="M380.83911 211.97671a28.870571 28.870571 0 0 1-28.87057 28.87057 28.870571 28.870571 0 0 1-28.87057-28.87057 28.870571 28.870571 0 0 1 28.87057-28.87057 28.870571 28.870571 0 0 1 28.87057 28.87057z" paint-order="markers stroke fill" transform="translate(-318.88562 -180.59501)"/>
+  <path fill="#f4f2f3" d="M33.08292 4.01671c-.23319 0-.42092.18772-.42092.42092V9.2928c0 .2332.18773.42092.42092.42092.2332 0 .42092-.18772.42092-.42092V4.43763c0-.2332-.18772-.42092-.42092-.42092zm-2.75367.17404c-.0279-.003-.0566-.003-.0856.00035-.23194.0242-.39917.2304-.37495.46234l.21218 2.03119c.0242.23194.23041.39918.46233.37496.23195-.0242.39919-.2304.37496-.46234l-.212-2.03118c-.0212-.20295-.18177-.35637-.37695-.37532zm5.5266.002c-.19519.0188-.35578.17221-.37714.37513l-.21363 2.03102c-.0244.23192.14285.43831.37478.4627.23191.0244.43811-.14268.46251-.3746l.21364-2.03119c.0244-.23192-.14286-.43814-.37478-.46252-.029-.003-.0575-.003-.0854-.00052zm-8.3553.4082c-.028.00022-.0565.003-.085.009-.22814.0483-.37294.27089-.32464.49903l1.00552 4.74981c.0483.22814.27088.37293.49902.32464.22814-.0483.37294-.27072.32465-.49886l-1.00552-4.74998c-.0423-.19963-.21792-.33543-.41401-.3339zm11.18382.004c-.19609-.002-.3718.13394-.41419.33353l-1.00897 4.74925c-.0485.22811.0962.45076.32427.49922.22811.0485.45076-.0962.49921-.32428l1.00897-4.74926c.0485-.2281-.0962-.45076-.32427-.49921-.0285-.006-.057-.009-.085-.009zM24.801 5.36212c-.0545-.005-.11077.001-.16622.0194-.22178.0721-.34238.3085-.27031.53028l.6311 1.94236c.0721.22179.30868.34238.53046.27032.22179-.0721.3422-.30868.27013-.53046l-.63109-1.94236c-.054-.16634-.20059-.27568-.36407-.28958zm16.56765.001c-.16348.0139-.30999.12324-.36406.28957l-.63147 1.94218c-.0721.22177.0484.45837.27014.53046.22178.0721.45837-.0484.53047-.27013l.63146-1.94236c.0721-.22178-.0484-.45837-.27014-.53046-.0554-.018-.11191-.0239-.1664-.0193zm-19.23721.9759c-.0547.001-.11004.013-.16331.0367-.21298.0947-.30836.34244-.21364.55553l1.97197 4.43662c.0947.21308.34244.30836.55553.21364.21298-.0947.30854-.34244.21382-.55553l-1.97216-4.43662c-.071-.15983-.22817-.25351-.39221-.25033zm21.93693.0149c-.16403-.003-.32132.0901-.39257.24979l-1.97798 4.4339c-.095.21296-.00004.46088.21292.55589.21297.095.46088.00005.5559-.21291L44.4446 6.9467c.095-.21297.00005-.46089-.21291-.5559-.0532-.0237-.10864-.0357-.16332-.0369zM19.65353 7.6501c-.0808-.006-.16406.012-.23979.0558-.20196.1166-.27065.37302-.15406.57497l1.02115 1.76869c.1166.20196.373.27065.57496.15405.20195-.1166.27065-.37301.15406-.57497L19.9887 7.85996c-.0729-.12623-.20047-.20041-.33517-.20983zm26.85877 0c-.13468.009-.26211.0836-.33498.20983l-1.02133 1.76868c-.1166.20196-.0477.45837.15424.57497.20196.1166.45837.0479.57497-.15405l1.02114-1.76869c.1166-.20195.0479-.45837-.15406-.57497-.0757-.0437-.15916-.0614-.23998-.0558zM17.24739 9.15083c-.081.003-.16211.029-.2329.0803-.18875.13693-.23048.39911-.0935.58787l2.85086 3.92995c.13693.18876.39929.23049.58805.0936.18876-.13693.23049-.39911.0935-.58787l-2.85104-3.92995c-.0856-.11798-.22004-.17847-.35497-.17386zm31.70122.0214c-.13493-.005-.26941.0555-.35516.17331l-2.8563 3.92614c-.1372.18857-.0958.45086.0928.58805.18858.13718.45087.0959.58806-.0926l2.85613-3.92614c.13718-.18858.0957-.45086-.0928-.58805-.0707-.0514-.15176-.0778-.23272-.0807zm-33.85196 1.78231c-.10744-.006-.21708.0299-.30374.10791-.17332.15602-.18725.42109-.0312.59441l1.36648 1.51799c.15601.17332.42109.18726.59441.0312.17332-.15602.18726-.42127.0312-.59459l-1.3663-1.51781c-.078-.0867-.18339-.13351-.29085-.13916zm35.97562.003c-.10745.006-.21282.0525-.29084.13915l-1.36648 1.51763c-.15606.1733-.14224.43855.0311.59459.17329.15604.43837.14205.59441-.0312l1.36666-1.51762c.15605-.17331.14205-.43856-.0312-.59459-.0867-.078-.19611-.11354-.30357-.10791zm-38.03696 1.97705c-.10745.006-.21266.0525-.29067.13916-.15602.17332-.14207.43839.0312.59441l3.60841 3.24834c.17332.15603.43839.14207.5944-.0312.15603-.17331.14226-.43839-.0311-.59441l-3.60858-3.24834c-.0867-.078-.1963-.11356-.30376-.10791zm40.10831.0142c-.10745-.006-.21722.0298-.30393.10773l-3.61059 3.24581c-.17342.15589-.18768.42097-.0318.5944.1559.17342.42117.18751.59459.0316l3.61077-3.2458c.17342-.1559.1875-.42098.0316-.59441-.078-.0867-.18322-.13361-.29066-.13933zm-41.8225 2.18998c-.13494-.005-.26949.0558-.35515.17367-.13707.18866-.0955.4508.0932.58787l1.65224 1.20044c.18866.13708.45079.0957.58786-.093.13708-.18866.0956-.45098-.093-.58805l-1.65224-1.20044c-.0707-.0514-.15193-.0776-.23289-.0805zm43.53505.0153c-.081.003-.16211.0289-.23289.0803l-1.65297 1.19936c-.18875.13694-.2305.39929-.0936.58805.13695.18875.39912.23031.58787.0934l1.65316-1.19935c.18875-.13694.23031-.39912.0934-.58787-.0856-.11797-.22004-.17847-.35497-.17385zM9.7192 17.48992c-.13469.009-.26211.0836-.33499.20982-.1166.20195-.0479.45837.15405.57497l4.20463 2.42758c.20195.1166.45837.0479.57497-.15405.1166-.20195.0479-.45837-.15405-.57497l-4.20463-2.42759c-.0757-.0437-.15917-.0614-.23998-.0558zm46.72744 0c-.0808-.006-.16425.012-.23998.0558l-4.20463 2.42759c-.20195.1166-.27065.37302-.15405.57497.1166.20195.37302.27065.57497.15405l4.20482-2.42758c.20195-.1166.27064-.37302.15404-.57497-.0729-.12622-.20048-.20041-.33517-.20982zm-47.9386 2.50606c-.16403-.004-.32133.0899-.39258.2496-.095.21298-.00006.46091.21292.5559l1.86532.83202c.21298.095.46091.00007.5559-.2129.095-.21298-.00012-.46091-.21309-.5559l-1.86515-.83202c-.0532-.0238-.10865-.0356-.16332-.0367zm49.15794.0173c-.0547.001-.11024.013-.16351.0367l-1.86569.83057c-.21304.0949-.3083.34267-.21346.55571.0949.21304.34286.3083.5559.21346l1.8657-.83076c.21303-.0948.30811-.34267.21327-.55571-.0711-.15978-.22818-.25323-.39221-.24997zM7.42859 22.61527c-.16349.0137-.31006.12291-.36424.28921-.0722.22172.048.45839.26977.53064l4.61629 1.50418c.22171.0722.45839-.0481.53064-.26977.0722-.22172-.048-.4584-.26977-.53064L7.595 22.6347c-.0554-.0181-.11192-.024-.16641-.0194zm51.31484.018c-.0545-.005-.11078.001-.16623.0194l-4.61736 1.50092c-.22178.0721-.34223.30869-.27014.53046.0721.22177.30868.34223.53046.27014l4.61719-1.50092c.22178-.0721.3424-.30869.27032-.53046-.0541-.16633-.20077-.2757-.36424-.28957zM6.75607 25.36479c-.1961-.002-.37196.13412-.41438.33371-.0485.2281.0962.45073.32427.49922l1.99777.42455c.2281.0485.45072-.0962.49921-.32427.0485-.22811-.0962-.45074-.32427-.49922l-1.99759-.42455c-.0285-.006-.057-.009-.085-.009zm52.65462.004c-.028.00023-.0563.004-.0848.009l-1.99778.42437c-.2281.0485-.37271.27093-.32426.49904.0485.2281.2711.3729.49921.32445l1.99759-.42437c.2281-.0485.3729-.27111.32445-.49922-.0424-.19959-.21829-.33537-.41437-.33371zM6.24704 28.13046c-.1952.0187-.35587.17185-.37731.37477-.0245.2319.14232.43838.37422.46288l4.82829.51048c.2319.0245.43838-.1425.46288-.37441.0245-.2319-.1425-.43838-.37441-.46288l-4.82828-.51048c-.029-.003-.0575-.003-.0854-.00035zm53.6763.0363c-.0279-.003-.0566-.003-.0856.00035l-4.82883.50394c-.23194.0242-.39914.2304-.37496.46233.0242.23194.2304.39918.46234.37496l4.82883-.50394c.23193-.0242.39914-.2304.37496-.46234-.0212-.20294-.1816-.35634-.37678-.37532zM6.16529 30.96149c-.2332 0-.42091.18772-.42091.42092 0 .23319.18771.42091.42091.42091h2.04228c.23319 0 .4211-.18772.4211-.42091 0-.2332-.18791-.42092-.4211-.42092zm51.79298 0c-.23319 0-.42092.18772-.42092.42092.00001.23319.18773.42091.42092.42091h2.04228c.23319 0 .42092-.18772.42092-.42091 0-.2332-.18773-.42092-.42092-.42092zM11.15508 33.2561c-.0279-.003-.0564-.003-.0854.00035l-4.82902.50394c-.23194.0242-.39913.2304-.37495.46233.0242.23194.2304.39918.46233.37496l4.82902-.50394c.23194-.0242.39913-.2304.37495-.46234-.0212-.20294-.18177-.35634-.37695-.37531zm43.85314.0298c-.19521.0187-.35588.17186-.37732.37478-.0245.2319.14233.43838.37423.46288l4.82829.51048c.23191.0245.43837-.14251.46288-.37441.0245-.2319-.14251-.43838-.37441-.46288l-4.8281-.51048c-.029-.003-.0577-.003-.0856-.00035zm-46.2602 2.8436c-.028.00024-.0565.003-.085.009l-1.99777.42436c-.22811.0485-.37271.27111-.32427.49922.0485.22811.27111.37272.49922.32427l1.99777-.42419c.2281-.0485.37271-.27111.32426-.49921-.0424-.1996-.2181-.33537-.41419-.33372zm48.66925.004c-.19609-.002-.37177.13394-.41419.33353-.0485.2281.096.45074.32409.49922l1.99777.42455c.22809.0485.45073-.096.49921-.32409.0485-.2281-.0962-.45092-.32426-.4994l-1.9976-.42455c-.0285-.006-.057-.009-.085-.009zm-45.30519 1.65787c-.0545-.005-.11077.001-.16622.0194L7.3285 39.31168c-.22178.0721-.34223.30869-.27014.53046.0721.22178.30868.34222.53046.27014l4.61719-1.50092c.22178-.0721.34241-.30869.27032-.53046-.0541-.16633-.20077-.2757-.36425-.28957zm41.93713.0149c-.16349.0137-.31005.12292-.36423.28921-.0722.22173.048.4584.26977.53065l4.61628 1.50418c.22172.0722.4584-.0481.53064-.26977.0723-.22172-.048-.4584-.26977-.53065l-4.61628-1.50418c-.0554-.0181-.11191-.024-.16641-.0194zm-43.69909 3.27251c-.0547.001-.11006.0128-.16332.0365l-1.86587.83075c-.21304.0948-.30812.34267-.21328.55571.0949.21304.34268.30812.55571.21328l1.86589-.83058c.21303-.0948.30811-.34267.21327-.55571-.0711-.15978-.22837-.25323-.3924-.24997zm45.45888.016c-.16403-.004-.32133.0899-.39258.24961-.095.21297-.00006.4609.21291.55589l1.86515.83202c.21297.095.46091.00006.5559-.21291.095-.21297.00006-.4609-.21291-.55589l-1.86515-.83203c-.0532-.0238-.10864-.0356-.16332-.0367zm-41.82613.91214c-.0808-.006-.16424.012-.23998.0558L9.53826 44.4903c-.20195.1166-.27065.37302-.15405.57497.1166.20195.37302.27065.57497.15405l4.20463-2.4274c.20195-.1166.27064-.3732.15405-.57515-.0729-.12622-.2003-.20041-.33499-.20982zm38.20028 0c-.13469.009-.26229.0836-.33517.20982-.1166.20195-.0479.45855.15405.57515l4.20463 2.4274c.20196.1166.45855.0479.57515-.15405.1166-.20195.0479-.45837-.15404-.57497l-4.20482-2.42758c-.0757-.0437-.15899-.0614-.2398-.0558zm-39.24903 3.56244c-.081.003-.16211.0291-.2329.0805l-1.65296 1.19935c-.18875.13694-.2305.39912-.0936.58787.13695.18875.39912.2305.58787.0935l1.65314-1.19935c.18877-.13693.23051-.39911.0936-.58786-.0856-.11797-.22022-.17866-.35516-.17404zm40.28761.0142c-.13494-.005-.26948.0558-.35515.17367-.13708.18865-.0955.45098.0932.58805l1.65224 1.20044c.18866.13707.4508.0955.58787-.0932.13707-.18866.0956-.4508-.093-.58787l-1.65224-1.20044c-.0707-.0514-.15193-.0778-.23289-.0807zm-36.54387.14533c-.10743-.006-.21702.0298-.30374.10773l-3.61076 3.2458c-.17342.15589-.18751.42098-.0316.59441.15589.17342.42097.1875.5944.0316l3.61077-3.2458c.17342-.15589.18751-.42098.0316-.59441-.0779-.0867-.18322-.13361-.29067-.13933zm32.80012.0116c-.10745.006-.21283.0525-.29084.13915-.15603.17332-.14207.43839.0312.59441l3.60841 3.24834c.17332.15604.43857.14208.59459-.0312.15603-.17331.14207-.43839-.0312-.5944l-3.6086-3.24835c-.0867-.078-.19611-.11355-.30356-.10791zm-29.37464 3.08358c-.13493-.005-.2696.0554-.35534.1733l-2.85613 3.92614c-.13719.18858-.0959.45087.0926.58805.18857.13719.45087.0959.58805-.0927l2.85613-3.92614c.13718-.18857.0959-.45086-.0926-.58805-.0707-.0514-.15175-.0778-.23271-.0806zm25.93573.0176c-.081.003-.16211.0289-.2329.0803-.18875.13694-.23048.39911-.0936.58787l2.85086 3.92995c.13693.18876.39911.2305.58787.0936.18876-.13693.23049-.3991.0936-.58786l-2.85086-3.92996c-.0856-.11797-.22004-.17846-.35498-.17385zm-29.6228.6064c-.10745.006-.21282.0525-.29084.13915l-1.36649 1.51763c-.15605.1733-.14223.43855.0311.59459.1733.15604.43837.14205.5944-.0313l1.36666-1.51762c.15606-.1733.14206-.43856-.0312-.59459-.0867-.078-.19611-.11354-.30357-.10791zm33.33076.002c-.10745-.006-.21691.0299-.30356.10791-.17333.156-.18726.42108-.0313.5944l1.3663 1.51799c.15602.17333.42109.18726.59442.0312.17332-.15601.18726-.42126.0312-.59459l-1.36631-1.5178c-.078-.0867-.18339-.13351-.29084-.13916zm-25.65524 1.68366c-.16403-.004-.32114.0899-.39239.24961l-1.97816 4.43389c-.095.21297-.00005.46089.21292.5559.21296.095.46089.00005.55589-.21291l1.97815-4.4339c.095-.21296.00005-.46089-.21292-.55589-.0532-.0238-.10881-.0356-.16349-.0367zm17.95556.0122c-.0547.001-.11023.0128-.1635.0365-.21297.0947-.30836.34244-.21363.55553l1.97196 4.43662c.0947.21297.34262.30836.55571.21364.21298-.0947.30836-.34244.21364-.55553l-1.97197-4.43662c-.071-.15973-.22818-.25329-.39221-.25015zM20.61581 52.5046c-.13468.009-.26212.0836-.33498.20982l-1.02115 1.76869c-.11659.20195-.0479.45837.15406.57497.20195.1166.45837.0479.57496-.15405l1.02115-1.76869c.11659-.20195.0479-.45837-.15406-.57497-.0757-.0437-.15916-.0614-.23998-.0558zm24.93421 0c-.0808-.006-.16406.0121-.23979.0558-.20195.1166-.27065.37302-.15405.57497l1.02114 1.76869c.1166.20195.37302.27064.57496.15405.20196-.1166.27066-.37302.15406-.57497l-1.02114-1.76869c-.0729-.12622-.20049-.20041-.33518-.20982zm-17.0545.0634c-.19609-.002-.3718.13394-.41419.33354l-1.00897 4.74926c-.0485.2281.0962.45076.32427.49921.22811.0485.45076-.0962.49922-.32427l1.00896-4.74926c.0485-.2281-.0962-.45076-.32427-.49921-.0285-.006-.057-.009-.085-.009zm9.1599.003c-.028.00022-.0563.003-.0848.009-.22814.0483-.37294.27071-.32465.49885l1.00553 4.74999c.0483.22814.27088.37293.49903.32464.22814-.0483.37293-.27089.32464-.49903l-1.0057-4.74965c-.0423-.19963-.21793-.33543-.41402-.33391zm-4.5725.47905c-.23319 0-.42092.18772-.42092.42092v4.85517c0 .2332.18773.42092.42092.42092.2332 0 .42092-.18772.42092-.42092v-4.85517c0-.2332-.18772-.42092-.42092-.42092zm-7.72657 1.56886c-.16347.0139-.31017.12324-.36423.28957l-.63129 1.94236c-.0721.22178.0484.45837.27014.53047.22177.0721.45836-.0486.53046-.27032l.63128-1.94218c.0721-.22177-.0484-.45836-.27013-.53046-.0554-.018-.11173-.024-.16623-.0194zm15.44987.001c-.0545-.005-.11078.001-.16622.0193-.22178.0721-.34238.30868-.27033.53047l.63111 1.94235c.0721.22179.30868.3422.53046.27014.22178-.0721.34238-.3085.27032-.53028l-.63128-1.94236c-.0541-.16634-.20058-.27568-.36406-.28957zm-10.36543 1.08181c-.1952.0188-.356.17203-.37732.37496l-.21346 2.03119c-.0244.23192.14268.43812.3746.46252.23192.0244.4383-.14268.4627-.3746l.21345-2.03101c.0244-.23192-.14268-.4383-.37458-.4627-.029-.003-.0575-.003-.0854-.00035zm5.26736.002c-.0279-.003-.0566-.003-.0856.00035-.23193.0242-.39917.2304-.37495.46233l.21218 2.03138c.0242.23193.2304.399.46234.37478.23193-.0242.39918-.23041.37496-.46234l-.212-2.03119c-.0212-.20295-.18178-.35637-.37697-.37533z" paint-order="markers stroke fill"/>
+  <path d="m469.09621 100.6068-65.50955 38.06124-41.41979 65.20654 60.59382-44.88117z" filter="url(#f)" opacity=".40900005" paint-order="markers stroke fill" transform="translate(-112.09544 -20.8224) scale(.35154)"/>
+  <path fill="#ff5150" d="m36.3834003 34.83806178-6.60095092-6.91272438 23.41607429-15.75199774z" paint-order="markers stroke fill"/>
+  <path fill="#f1f1f1" d="m36.38339038 34.83805895-6.60095092-6.91272438-16.81512624 22.66471911z" paint-order="markers stroke fill"/>
+  <path d="m12.96732 50.59006 23.41607-15.75201 16.81513-22.66472z" opacity=".243"/>
+</svg>

package/lib/SafariCheck/shareIcon.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>share</title>
+    <g id="share" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(3.500000, 2.000000)" stroke="#000000">
+            <path d="M6.3,4 L8.1,4 C8.59705627,4 9,4.39796911 9,4.88888889 L9,11.1111111 C9,11.6020309 8.59705627,12 8.1,12 L0.9,12 C0.402943725,12 0,11.6020309 0,11.1111111 L0,4.88888889 C0,4.39796911 0.402943725,4 0.9,4 L2.7,4 L2.7,4" id="Path"></path>
+            <line x1="4.5" y1="7" x2="4.5" y2="-1.94289029e-16" id="Path-2"></line>
+            <polyline id="Path-3" points="2.5 2 4.5 0 6.5 2"></polyline>
+        </g>
+    </g>
+</svg>

package/lib/SafariCheck/style.css.ts

@@ -0,0 +1,106 @@
+import { style } from "@vanilla-extract/css";
+import { fadeIn } from "../animations.css.ts";
+
+export const container = style({
+  display: "flex",
+  alignItems: "center",
+  justifyItems: "center",
+  flexDirection: "column",
+  blockSize: "100%",
+});
+
+export const safariPrompt = style({
+  backgroundColor: "white",
+  borderRadius: "1rem",
+  maxWidth: "38rem",
+  padding: "clamp(1rem, 5vw, 3rem)",
+  margin: "auto",
+});
+
+export const safariLogo = style({
+  maxWidth: "4rem",
+  marginInline: "auto",
+  marginBlockEnd: "1rem",
+  aspectRatio: "1",
+});
+
+export const safariPromptHeader = style({
+  marginBlockEnd: "clamp(1.5rem, 4cqw, 2rem)",
+});
+
+export const safariPromptActions = style({
+  display: "grid",
+  gap: "0.5rem",
+  gridTemplateColumns: "repeat(auto-fill, minmax(12rem, 1fr))",
+  marginBlock: "1.5rem",
+});
+
+export const safariDismissArea = style({
+  textAlign: "center",
+  marginBlock: "2rem 3rem",
+});
+
+export const compatCheckLoaderContainer = style({
+  maxInlineSize: "16rem",
+  margin: "auto",
+});
+
+export const indicator = style({
+  marginInline: "auto",
+});
+
+export const compatCheckLoaderText = style({
+  fontStyle: "italic",
+  color: `hsl(0 0% 0% / 0.5)`,
+  animation: `${fadeIn} 300ms 150ms both`,
+  marginBlockStart: "0.5rem",
+  textAlign: "center",
+});
+
+export const emptyStateHeading = style({
+  textAlign: "center",
+  marginBlockEnd: "0.5rem",
+});
+
+export const appIcon = style({
+  aspectRatio: "1",
+  borderRadius: "20%",
+  boxShadow: "0 0.125rem 0.25rem hsl(0 0% 0% / 0.2)",
+  width: "3rem",
+  height: "auto",
+  marginInline: "auto",
+  marginBlockEnd: "1rem",
+});
+
+export const dialog = style({
+  padding: "2rem",
+  textAlign: "center",
+});
+
+export const heading = style({
+  fontSize: "1.25rem",
+});
+
+export const intro = style({
+  marginBlockStart: "0.5rem",
+});
+
+export const steps = style({
+  marginBlock: "2rem",
+  borderBlockStart: "1px solid hsl(0 0% 0% / 0.1)",
+  textAlign: "left",
+});
+
+export const step = style({
+  borderBlockEnd: "1px solid hsl(0 0% 0% / 0.1)",
+  listStyle: "decimal",
+  listStylePosition: "inside",
+  paddingBlock: "0.75rem",
+});
+
+export const icon = style({
+  display: "inline-block",
+  position: "relative",
+  inlineSize: "1.25rem",
+  top: "0.125em",
+});

package/lib/client.ts

@@ -11,6 +11,7 @@ import {
   array,
   mask,
   object,
+  partial,
   string,
   Struct,
   unknown,
@@ -296,6 +297,32 @@ export class IndieTabletopClient {
     return result;
   }
 
+  async userAgent() {
+    return await this.fetch(
+      "/ua",
+      partial({
+        browser: partial({
+          name: string(),
+          version: string(),
+          major: string(),
+        }),
+        device: partial({
+          type: string(),
+          model: string(),
+          vendor: string(),
+        }),
+        engine: partial({
+          name: string(),
+          version: string(),
+        }),
+        os: partial({
+          name: string(),
+          version: string(),
+        }),
+      }),
+    );
+  }
+
   async logout() {
     const result = await this.fetch(
       "/v1/sessions",

package/lib/index.ts

@@ -20,6 +20,7 @@ export * from "./MiddotSeparated/MiddotSeparated.tsx";
 export * from "./ModalDialog/index.tsx";
 export * from "./QRCode/QRCode.tsx";
 export * from "./ReleaseInfo/index.tsx";
+export * from "./SafariCheck/SafariCheck.tsx";
 export * from "./ServiceWorkerHandler.tsx";
 export * from "./ShareButton/ShareButton.tsx";
 export * from "./SubscribeCard/SubscribeByEmailCard.tsx";

package/lib/vars.css.ts

@@ -7,3 +7,7 @@ export const Color = createGlobalTheme(":root", {
   PALE_GRAY: "#f6f7f7",
   PURPLE: "#d6446e",
 });
+
+export const ZIndex = createGlobalTheme(":root", {
+  DIALOG: "100",
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indietabletop/appkit",
-  "version": "5.5.1",
+  "version": "6.1.0",
   "description": "A collection of modules used in apps built by Indie Tabletop Club",
   "private": false,
   "type": "module",
@@ -29,32 +29,32 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^10.1.6",
-    "@storybook/addon-links": "^10.1.6",
-    "@storybook/react-vite": "^10.1.6",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-links": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
     "@types/react": "^19.2.7",
-    "msw": "^2.12.4",
+    "msw": "^2.12.7",
     "msw-storybook-addon": "^2.0.6",
     "np": "^10.2.0",
-    "storybook": "^10.1.6",
+    "storybook": "^10.1.11",
     "typescript": "^5.9.3",
-    "vite": "^7.2.7",
-    "vitest": "^4.0.15"
+    "vite": "^7.3.1",
+    "vitest": "^4.0.16"
   },
   "dependencies": {
     "@ariakit/react": "^0.4.20",
     "@indietabletop/tooling": "^5.2.0",
-    "@indietabletop/types": "^1.1.0",
-    "@vanilla-extract/css": "^1.17.5",
+    "@indietabletop/types": "^1.2.0",
+    "@vanilla-extract/css": "^1.18.0",
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vanilla-extract/sprinkles": "^1.6.5",
     "@xstate/react": "^6.0.0",
     "nanoid": "^5.1.6",
     "superstruct": "^2.0.2",
-    "swr": "^2.3.7",
-    "wouter": "^3.8.1",
-    "xstate": "^5.24.0"
+    "swr": "^2.3.8",
+    "wouter": "^3.9.0",
+    "xstate": "^5.25.0"
   },
   "msw": {
     "workerDirectory": [