{
  lib,
  buildNpmPackage,
  fetchFromGitHub,
}:

# Build the customized Phanpy frontend as an immutable Nix store path.
buildNpmPackage {
  pname = "phanpy";
  version = "0.1.0-cd57e97";

  src = fetchFromGitHub {
    owner = "cheeaun";
    repo = "phanpy";
    rev = "cd57e97e2b708a29b9049c48a8da549594393c47";
    hash = "sha256-kKWzklgTGlgy8bWVFGfTw1KzRXoO0HV5VKxLtV59jpY=";
  };

  patches = [
    ./0ff-space.patch
    ./local-only.patch
  ];

  postPatch = ''
    cp ${../branding/spiral-v2.ico} public/favicon.ico
    cp ${../branding/spiral-v2-192.png} public/apple-touch-icon.png
    cp ${../branding/spiral-v2-192.png} public/logo-192.png
    cp ${../branding/spiral-v2-512.png} public/logo-512.png
    cp ${../branding/spiral-v2-512.png} public/logo-maskable-512.png
    cp ${../branding/spiral-v2-72.png} public/logo-badge-72.png
    cp ${../../../globalServices/branding/0ff-space-background.css} \
      public/0ff-space-background.css
    # cp from a Nix store path comes out read-only here, which breaks the
    # append below.
    chmod +w public/0ff-space-background.css

    # Phanpy's whole design-token system chains off --blue-color (see
    # useTitle-*.css's :root block: --link-color, --button-bg-color, and
    # --focus-ring-color all reference it, directly or transitively), so
    # overriding this one variable recolors links/buttons/focus rings
    # together. Not touching --red-color/--purple-color/--green-color/
    # --orange-color: those back --favourite-color/--reblog-color/
    # --group-color/--reply-to-color, semantic per-action colors rather
    # than brand ones. !important because Vite injects Phanpy's own
    # compiled stylesheet links *after* ours (this file is inserted via
    # the </head> substitution below, but Vite's own asset-injection
    # runs on top of that during the build and lands later in the
    # document) -- without it, Phanpy's own later same-specificity :root
    # rule would win and silently keep the default royalblue.
    printf '\n:root {\n  --blue-color: #d91e4d !important;\n}\n' \
      >> public/0ff-space-background.css

    # #compose-button's resting state uses --button-bg-blur-color, a
    # separate hardcoded rgba(65,105,225,...) literal (royalblue as raw
    # RGB) rather than being derived from --blue-color -- only its
    # hover/focus state actually references the variable. Same red at
    # the same 66.667% alpha.
    printf '\n:root {\n  --button-bg-blur-color: rgba(217, 30, 77, .66667) !important;\n}\n' \
      >> public/0ff-space-background.css

    # src/pages/welcome.jsx's #why-container is the feature showcase
    # (Boosts Carousel, nested comments, grouped notifications, ...)
    # under the login button -- redundant with the tagline right above it
    # (also hidden below). The <hr> right after it would otherwise dangle
    # with nothing left to divide.
    printf '\n#why-container,\n#why-container + hr {\n  display: none !important;\n}\n' \
      >> public/0ff-space-background.css

    # welcome.jsx's <p class="desc">A minimalistic opinionated Mastodon
    # web client.</p> -- same reasoning as #why-container above, just
    # marketing copy on a page only the operator ever sees.
    printf '\n#welcome .desc {\n  display: none !important;\n}\n' \
      >> public/0ff-space-background.css

    substituteInPlace index.html \
      --replace-fail '</head>' \
      '<link rel="stylesheet" href="./0ff-space-background.css"></head>'

    # login.jsx only pre-fills its instance field from a ?instance=
    # query param or a previous login's cached localStorage value --
    # never from a config default (DEFAULT_INSTANCE in utils/api.js,
    # already patched to social.0ff.space by 0ff-space.patch, only feeds
    # anonymous/logged-out API calls, not this form). The welcome page's
    # "Log in" button linked to plain /login with neither, so first-time
    # visitors had to type the instance by hand.
    substituteInPlace src/pages/welcome.jsx \
      --replace-fail '<Link to="/login" class="button">' \
      '<Link to="/login?instance=social.0ff.space" class="button">'
  '';

  npmDepsHash = "sha256-LpvZfIzIdgxXg4upcDKm7jbK7CjrRvg//HULO4GDTdU=";

  # Vite embeds these values into the static frontend during the build.
  env = {
    PHANPY_COMMIT_HASH = "cd57e97";
    SOURCE_DATE_EPOCH = "1697649263";
    VITE_CLIENT_NAME = "Phanpy";
    VITE_WEBSITE = "https://phanpy.0ff.space";
  };

  # Install only the generated static site; build dependencies stay outside
  # the runtime closure.
  installPhase = ''
    runHook preInstall

    mkdir -p "$out"
    cp -r dist/. "$out/"

    runHook postInstall
  '';

  meta = {
    description = "Minimalistic Mastodon web client customized for 0ff.space";
    homepage = "https://github.com/cheeaun/phanpy";
    license = lib.licenses.mit;
  };
}